v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Progress

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

Page Contents

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.
  • Use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style or custom CSS to set their width.
  • The .progress-bar also requires role="progressbar" and some aria- attributes to make it accessible.

Example #

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

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

Additional Features #

Alter the appearance of your progress bars with custom CSS, background utilities, stripes, and more.

Labels #

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

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

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

0%
0%
2%
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%; min-width: 2rem;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 2%; min-width: 2rem;" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">2%</div>
</div>

Height #

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

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

Color Variants #

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

Conveying Meaning to Assistive Technologies

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

50%
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress bg-dark">
<div class="progress-bar bg-cyan-300 text-dark" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">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">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="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">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Stacked #

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

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></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.