Progress bar

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

• We use the .progress as a wrapper to indicate the max value of the progress bar.

• The .progress wrapper also requires a role="progressbar" and aria attributes to make it accessible, including an accessible name (using aria-label, aria-labelledby, or similar).

• 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 its width.

• 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" 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>

⟢ 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" role="progressbar" aria-label="Animated striped 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>