Progress Bars

Visual indicators for completion and loading

Progress bars show completion status or loading indicators. They support labels, stripes, animations, and stacking.

A progress bar uses .progress as the outer container and .progress-bar as the inner fill. Set the width with inline style or utility classes.

<div class="progress">
  <div class="progress-bar"
    style="width: 25%">
  </div>
</div>

<div class="progress">
  <div class="progress-bar"
    style="width: 50%">
  </div>
</div>

<div class="progress">
  <div class="progress-bar"
    style="width: 75%">
  </div>
</div>

25%

50%

75%

100%

.progress .progress-bar

24 / 37