Today I have learned progress and spinner in javascript

 Progress

A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words we can say that, Progress Bars can be used to depict the status of anything that is in progress.

Spinner

The spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually

 <div class="spinner-grow text-muted"></div>
  <div class="spinner-border text-primary"></div>
  <div class="spinner-border text-secondary"></div>
  <div class="spinner-grow text-success"></div>
  <div class="spinner-border text-info"></div>
  <div class="spinner-border text-dark"></div>
  <div class="spinner-border text-warning"></div>
  <div class="spinner-border text-danger"></div>
  <div class="spinner-border text-light"></div>
</div>
<div class="progress">
  <div class="progress-bar" style={{width:"10%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar progress-bar-striped  progress-bar-animated" style={{width:"20%"}}>20%</div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-primary" style={{width:"30%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-dark" style={{width:"40%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-info" style={{width:"50%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-secondary" style={{width:"60%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-warning" style={{width:"70%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar bg-danger" style={{width:"80%"}}></div>
</div>
<br></br>
<div class="progress">
  <div class="progress-bar progress-bar-striped  progress-bar-animated" style={{width:"90%"}}>90%</div>
</div>
Output:


Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Student Management System with React.js and NestJS

  🚀 My Journey Creating a Student Management System 🌟 I'm excited to share my recent project — a Student Management System ! This project gave me hands-on experience in building a full-stack application, enhancing both my frontend and backend development skills. 💡 Project Overview The Student Management System is designed to help educational institutions efficiently manage student data, including enrollment, attendance, and performance. The goal was to create a user-friendly platform for both students and administrators. 🔨 Tech Stack Used ✅ Frontend: JavaScript, HTML, CSS, React.js ✅ Backend: TypeScript, NestJS, Node.js ✅ Database: MongoDB (with _id for unique identifiers) 🌟 Key Features ✔️ Student Registration – Easy registration with unique ID management ✔️ Attendance Tracking – Real-time updates on student attendance ✔️ Performance Reports – Generate and view student performance reports ✔️ Admin Panel – Secure access for administrators to manage student...
Read more

Today I have solved the problem in javascript

 Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6. const mice = [1, 4, 9, 15]; const holes = [10, -5, 0, 16]; function minSteps(mice, holes) {    mice.sort((a, b) => a - b);     holes.sort((a, b) => a - b); let maxSteps = 0;     for (let i = 0; i < mice.length; i++) {         let steps = Math.abs(mice[i] - holes[i]);         if (steps > maxSteps) {             maxStep...
Read more

Today I have solved the problem in javascript

 The United States uses the imperial system of weights and measures, which means that there are many different, seemingly arbitrary units to measure distance. There are 12 inches in a foot, 3 feet in a yard, 22 yards in a chain, and so on. Create a data structure that can efficiently convert a certain quantity of one unit to the correct amount of any other unit. You should also allow for additional units to be added to the system. function convert(quantity, fromUnit, toUnit) {   if (!conversions[fromUnit] || !conversions[toUnit]) {     return "Invalid units";   }   return quantity * conversions[fromUnit][toUnit]; } const conversions = {   inch: {     foot: 1 / 12,     yard: 1 / 36,     mile: 1 / 63360,        },   foot: {     inch: 12,     yard: 1 / 3,     mile: 1 / 5280,        },   yard: {     inch: 36,     foot: 3,  ...
Read more