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>
Browser support
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.