Bootstrap 3 Progress Bars

Provide graphical feedback on the progress of a process with Bootstrap's progress bars.

Bootstrap provides a component for displaying progress bars on a website. Progress bars are typically used to provide feedback to the user on the progress of a given process or action. Users can visualize instantly how much is complete and how much more there is to go.

Default Progress Bar

To create a default progress bar, use the .progress class with a .progress-bar nested inside it.

With Label

You can include a label that displays a percentage value on the progress bar (to explicitly state, in percentage terms, the completeness of the task).

To display a label on the progress bar, insert text as contents of the <div> element that has the .progress-bar class applied.

Also, remove the <span> with .sr-only to prevent screen readers from reading out the percentage twice.

Minimum-Width

When using a label to display the percentage, it's a good idea to specify a min-width on the .progress-bar element. Without this, the label will be difficult to read when the value is very small.

Contextual Classes

You can use the contextual classes to provide extra semantics via color.

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
100% charged (Success)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
80% charged (Info)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="35"
aria-valuemin="0" aria-valuemax="100" style="width:35%">
35% charged (Warning)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%">
25% charged (Danger)
</div>
</div>

Stripes

You can add stripes by adding the .progress-bar-striped class to the .progress-bar element.

Animated Stripes

You can animate the stripes by adding the .active class to the .progress-bar element.

Stacked Progress Bars

By placing multiple .progress-bar elements inside a .progress element, they will become stacked — they'll appear alongside each other within the same bar.