Progress Bars

Overview

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .progress as a wrapper to indicate the max value of the progress bar.
We use the inner .progress-bar to indicate the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following example.

Examples

Completed 25 of 100.

Sample Background

<div class="progress" aria-busy="true">
  <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Please wait until the operation is finished.">
  </div>
</div>
<div class="text-left text-dark">
  <strong>Completed 25 of 100.</strong>
</div>

Small Variant

Sample Background

<div class="progress progress-sm" aria-busy="true">
  <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Please wait until the operation is finished.">
  </div>
</div>

Compact Variant

Sample Background

<div class="progress progress-xs" aria-busy="true">
  <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Please wait until the operation is finished.">
  </div>
</div>