Progress Bars & Spinners

Show completion with .progress wrapping a .progress-bar. Set width with inline style or utilities. Add .progress-bar-striped and .progress-bar-animated for motion.

Progress Bars

Show completion with .progress wrapping a .progress-bar. Set width with inline style or utilities. Add .progress-bar-striped and .progress-bar-animated for motion.

Use aria-valuenow, aria-valuemin, and aria-valuemax for accessibility.

Real-life example: A progress bar is like a download indicator — the blue fill shows how much of the movie has loaded.

Progress bar examples

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

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%"></div>
</div>

Spinners

Spinners show loading state. Use .spinner-border or .spinner-grow with .text-primary etc. Size with .spinner-border-sm.

Real-life example: A spinner is like a "please wait" sign at a bank counter — the page is working, not frozen.

Border and grow spinners

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<div class="spinner-grow text-success ms-3" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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