Progress

Overview #

A progress component can be created by adding the .progress class to a wrapping <div>, with an inner .progress-bar which is used purely for the visualization and labeling. A few things to keep in mind:

• The .progress wrapper requires a role="progressbar" and aria attributes to make it accessible, including an accessible name (using aria-label, aria-labelledby, or similar).
• The .progress-bar requires an inline style, utility class, or custom CSS to set its width.

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

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

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

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

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

Height and label #

Add labels by placing text within the .progress-bar. The default height of the bar and the font-size of the label are a little too small to display the label in a way where it is readable. Therefore, when setting inset labels, please increase the height of the progress component and increase the font-size of the bar using an inline style, utility class, or custom CSS.

<!-- Labeled progress -->
<div class="progress specific-h-25" role="progressbar" aria-label="Labeled example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fs-6" style="width: 25%;">25%</div>
</div>

Note that by default, the content inside the .progress-bar is controlled with overflow: hidden, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use .overflow-visible from the overflow utilities.

Background colors #

Change the background colors of progress components using the color and background helpers. This way, the labels will also have a properly contrasting color should you choose to use one.

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

<!-- Info progress -->
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-info" style="width: 75%;"></div>
</div>

<!-- Warning progress -->
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 50%;"></div>
</div>

<!-- Danger progress -->
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-danger" style="width: 25%;"></div>
</div>

Multiple bars #

You can include multiple progress components inside a container with the .progress-stacked class to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar must be applied to the .progress elements, rather than the .progress-bar elements.

<!-- Stacked progress bar -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar text-bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar text-bg-warning"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment four" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar text-bg-danger"></div>
  </div>
</div>

Striped bars #

Create striped progress bars by adding the .progress-bar-striped class to the .progress-bar element. They can also be animated by adding .progress-bar-animated to the bar.

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

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

Please note, this also works with different background colors (.text-bg-{color}).

As a loader #

Progress components can also be used as a loader by setting the width of the bar to 100%, and (more importantly) adding the .placeholder-wave class to the bar to give it a subtle loading animation. Here's an example showing a real-life UI/UX pattern.

<!-- Progress as loader -->
<div class="card specific-w-300 mw-100 mx-auto">
  <div class="card-header"></div>
  <div class="card-body">
    <p class="mb-0">Uploading <strong>README.md</strong>...</p>
    <p class="mb-2 text-body-secondary">Estimated time remaning: 14 seconds</p>
    <div class="d-flex align-items-center">
      <div class="progress flex-grow-1" role="status" aria-label="Loading">
        <div class="progress-bar placeholder-wave" style="width: 100%;"></div>
      </div>
      <div class="flex-shrink-0 ms-1">
        <button type="button" class="btn btn-sm btn-secondary rounded-pill px-0" style="width: 24px;" aria-label="Close">&times;</button>
      </div>
    </div>
  </div>
</div>