Progress bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Default progress bar.

60%

<div class="progress">
  <div class="bar" style="width: 45%;"></div>
</div>

<div class="progress">
  <div class="bar" style="width: 60%;">60%</div>
</div>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress">
  <div class="bar success" style="width: 40%;"></div>
</div>
<div class="progress">
  <div class="bar info" style="width: 20%;"></div>
</div>
<div class="progress">
  <div class="bar warning" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="bar danger" style="width: 80%;"></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE8.

<div class="progress striped">
  <div class="bar success" style="width: 40%"></div>
</div>
<div class="progress striped">
  <div class="bar info" style="width: 20%"></div>
</div>
<div class="progress striped">
  <div class="bar warning" style="width: 60%"></div>
</div>
<div class="progress striped">
  <div class="bar danger" style="width: 80%"></div>
</div>

Animated

Add .active to .striped to animate the stripes left to right.

<div class="progress striped active">
  <div class="bar" style="width: 45%"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="bar success" style="width: 35%"></div>
  <div class="bar warning" style="width: 20%"></div>
  <div class="bar danger" style="width: 10%"></div>
</div>