Bootstrap Progress bar and Spinners

Level : Advanced
Mentor: Shailendra Chauhan
Duration : 00:02:00

Basic Progress Bar:

This Bootstrap component provides a simple progress bar to visually represent the completion status of a task or process.

Example:

<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div> 

Progress Bar Height:

You can adjust the height of the progress bar to fit your design needs by adding a custom class.

Example:

<div class="progress">
 <div class="progress-bar progress-bar-custom" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress Bar Labels:

Display labels to indicate the progress percentage within the progress bar.

Example:

<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div> 

Colored Progress Bars:

Customize the color of the progress bar to match your theme or visual style.

Example:

<div class="progress">
 <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div> 

Striped Progress Bars:

Add stripes to the progress bar for a unique visual effect.

Example:

<div class="progress">
 <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div> 

Animated Progress Bar:

Animate the progress bar for a smoother user experience.

Example:

<div class="progress">
 <div class="progress-bar progress-bar-animated" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div> 

Multiple Progress Bars:

Display multiple progress bars in a single container.

Example:

<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
 <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div> 

Spinners:

Use Bootstrap spinners to indicate loading or processing.

Example:

<div class="spinner-border" role="status">
 <span class="sr-only">Loading...</span>
</div> 

Colored Spinners:

Customize the color of the spinner.

Example:

<div class="spinner-border text-danger" role="status">
 <span class="sr-only">Loading...</span>
</div> 

Growing Spinners:

Create a growing spinner animation.

Example:

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div> 

Spinner Size:

Adjust the size of the spinner.

Example:

<div class="spinner-border spinner-border-lg" role="status">
  <span class="sr-only">Loading...</span>
</div> 

Spinner Buttons:

Combine spinners with buttons for loading actions.

Example:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this