Progress bars

Examples and markup

Basic

Default progress bar with a vertical gradient.

60% Complete
  1. <div class="progress">
  2. <div class="progress-bar" style="width: 60%;"></div>
  3. </div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%;"></div>
  3. </div>
  4. <div class="progress">
  5. <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%;"></div>
  6. </div>
  7. <div class="progress">
  8. <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%;"></div>
  9. </div>
  10. <div class="progress">
  11. <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 80%;"></div>
  12. </div>

Animated

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in all versions of IE.

60% Complete
  1. <div class="progress">
  2. <div class="progress-bar progress-bar-striped active" style="width: 60%;"></div>
  3. </div>

Stacked

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

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
  3. <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%;"></div>
  4. <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
  5. </div>

Contextual alternatives

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

  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success" style="width: 20%"></div>
  3. </div>
  4. <div class="progress">
  5. <div class="progress-bar progress-bar-info" style="width: 40%"></div>
  6. </div>
  7. <div class="progress">
  8. <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
  9. </div>
  10. <div class="progress">
  11. <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
  12. </div>