Examples and markup
Basic
Default progress bar with a vertical gradient.
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
Striped
Uses a gradient to create a striped effect. Not available in IE7-8.
<div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
Animated
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
Stacked
Place multiple bars into the same .progress to stack them.
<div class="progress">
<div class="bar bar-success" style="width: 35%;"></div>
<div class="bar bar-warning" style="width: 20%;"></div>
<div class="bar bar-danger" style="width: 10%;"></div>
</div>
Options
Additional colors
Progress bars use some of the same button and alert classes for consistent styles.
<div class="progress progress-info">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
<div class="bar" style="width: 80%"></div>
</div>
Striped bars
Similar to the solid colors, we have varied striped progress bars.
<div class="progress progress-info progress-striped">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
<div class="bar" style="width: 80%"></div>
</div>