Progress

Progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Page Contents

New markup in v4.4.0 — The previous HTML structure for progress bars has been deprecated and replaced with a more accessible one. Note that the legacy progress bar structure will continue to work as before.. See what's changed in our migration guide.

How It Works

Use the custom progress component for displaying simple or complex progress bars. We don't use the HTML5 <progress> element, allowing you to stack progress bars, animate them, and place text labels over them.

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

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).
The inner .progress-bar is purely for the visual bar and label.
The .progress-bar requires an inline style, utility class, or custom CSS to set its width.
A special .progress-stacked class is provided 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>

Labels

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

25%

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

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%;">0%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%; min-width: 2rem;">0%</div>
</div>
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 2%; min-width: 2rem;">2%</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, but make sure to also define an explicit text color so the text remains readable.

Long label text for the progress bar, set to a dark color

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>

Width

Using the width sizing utilities can help with quickly configure the width of the .progress-bar.

<div class="progress" role="progressbar" aria-label="Example with 25% width utility" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-25"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example with 75% width utility " aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

Height

By setting a height value on the outer .progress container, you change the height accordingly.

<div class="progress" role="progressbar" style="height: .5rem;" aria-label="Example with .5rem height" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%;"></div>
</div>
<div class="progress" role="progressbar" style="height: 2rem;" aria-label="Example with 2rem height" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

Color Variants

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

Note, when using labels with custom background colors, make sure to also set an appropriate text color, so the labels remain readable and have sufficient contrast.

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

50%

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

Striped

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.

Animated progress bars are not available in browsers that do not support 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 bg-primary" style="width: 75%"></div>
</div>

Stacked

Include multiple progress components inside a container with .progress-stacked 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-bars.

<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 progress-bar-striped 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>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for progress component.

Name	Type	Default	Description
`$enable-progress`	boolean	`true`	Enable the generation of the progress classes. Smaller segements of the progress classes can be disabled with the following `$enable-*` variables.
`$enable-progress-striped`	boolean	`true`	Enable the generation of the striped progress bar rule.
`$enable-progress-animated`	boolean	`true`	Enable the generation of the animated progress bar rule.
`$progress-height`	string	`1rem`	Height of progress component.
`$progress-font-size`	string	`($font-size-base * .75)`	Font size for progress component.
`$progress-bg`	string	`$uibase-100`	Background color for progress component.
`$progress-bg`	string	`$uibase-100`	Background color for progress component.
`$progress-border-radius`	string	`$border-radius`	Border radius for progress component.
`$progress-box-shadow`	string	`map-get($shadows, "i1")`	Box shadow for progress component.
`$progress-bar-color`	string	`$white`	Text color for progress bar component.
`$progress-bar-color`	string	`$uibase-300`	Background color for progress bar component.
`$progress-box-shadow`	string	`inset 0 .125rem .25rem rgba($white, .25)`	Box shadow for progress bar component.
`$progress-bar-animation-timing`	string	`1s linear infinite`	Timing for animated progress bar.
`$progress-bar-transition`	string	`width .3s ease`	Transition rule for animated progress bar.

Mixins

No mixins available.