Bootstrap Progress bar and Spinners

Level : Advanced

Mentor: Shailendra Chauhan

Duration : 00:03: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

Upto 60% OFF

Know More

Still have some questions? Let's discuss.