-
4
-
You have 4 new messages !
- All Messages
-
- 3
-
David
- Log out
Progress Bars
Basic example
Default progress bar.
With label
Remove the <span>with .sr-onlyclass from within the progress bar to show a visible percentage.
Animated
Add .activeto .progress-bar-stripedto animate the stripes right to left. Not available in IE9 and below.
Stacked
Place multiple bars into the same .progressto stack them.
Squared
You can crate squared progress bars by adding .progress-squaredclass to .progress.
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Striped
Uses a gradient to create a striped effect. Not available in IE8.
Sizing
You can also change progress bar size easily by adding one of .progress-xs .progress-sm .progress-md .progress-lgclasses to .progress.