Search docs... Ctrl + / v5.

View on GitHub

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

Limited time offer: Get 10 free Adobe

Stock images.

ads via Carbon

On this page

How it works
Labels
Height
Backgrounds
Multiple bars
Striped
Animated stripes
Sass
Variables
Keyframes

How it works
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 examples.

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

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-valuenow="75" aria-valuemin=
</div>
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"
</div>

Height
We 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: 1px;">

<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
</div>

Backgrounds
Use background utility classes to change the appearance of individual progress bars.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-val
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuen
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-val
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-val
</div>

Multiple bars
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"
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-val
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuen
</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%
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style=
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="wi
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style=
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="
</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.

Toggle animation

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progress
</div>

Sass

Variables

$progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: $box-shadow-inset;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;

Keyframes
Used for creating the CSS animations for .progress-bar-animated. Included in scss/_progress-
bar.scss.

@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}

GitHub Twitter Examples About

Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Currently v5.0.0-beta3. Code licensed MIT, docs CC BY 3.0.