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.
<div class="progress" aria-busy="true">
  <div class="progress-bar" role="progressbar" 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>