Examples and markup

Basic

Default progress bar with a vertical gradient.

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

Striped

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

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

Animated

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

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

Stacked

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

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

Contextual alternatives

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

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