Bootstrap 5 Progress bar component

Responsive Progress bar built with the latest Bootstrap 5.

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

How it works

Progress bar 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 purely for the visual bar and label.
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, including an accessible name (using aria-label, aria-labelledby, or similar).
We provide a special .progress-stacked class to create multiple/stacked progress bars.

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

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

Width

Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

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

Height

You only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.

<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high"
   style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

With Label

Add labels to your progress bars by placing text within the .progress-bar.

To make the label visible you need to set a proper height to the bar.

25%

<div class="progress" style="height: 20px;">
  <div class="progress-bar bg-primary" role="progressbar"
   style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Even using the flex utility class if you need.

25%

<div class="d-flex flex-column">
  <span class="small mb-2">25%</span>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-label="Example with label"
     style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

Colors

Use background color utility classes to change the appearance of individual progress bars.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example"
   style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example"
   style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example"
   style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example"
   style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Indeterminate progress

Add a .progress-linear to any .progress make the progres to the linear animation.

<div class="progress progress-linear">
  <div class="progress-bar"
   role="progressbar" aria-label="Basic example">
    <span class="visually-hidden">progress bar</span>
  </div>
</div>

Apply the background color to indeterminate progress bars.

<div class="progress progress-linear">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Basic example"></div>
</div>

Striped progress

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

Animated stripes

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

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

Multiple bars

Include multiple progress bars in a progress component if you need.

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar 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 bg-info"></div>
  </div>
</div>

Inline progress

For inline progress indicators, use the Progress and d-inline-flex with an inline element such as <span> and add a custom width style.

4 of 16

<span class="fs-sm text-muted me-2">4 of 16</span>
<div class="progress d-inline-flex" style="width: 160px">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>  
</div>

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria/#progressbar)

The aria-labe, aria-valuemin, and aria-valuemax are static and must be configured in the HTML. aria-valuenow is updated dynamically by the foundation when the progress value is updated in determinate progress bars.

Edit this page on Github

Last updated on April 6, 2024