Progress bars provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Basic Example
Default progress bar
Examples:
HTML Code:
With label
Remove the <span>
with .sr-only
class from within the progress bar to show a visible percentage.
Examples:
HTML Code:
Contextual Alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Examples:
HTML Code:
Striped
Uses a gradient to create a striped effect. Not available in IE9 and below.
Examples:
HTML Code:
Animated
Add .active
to .progress-bar-striped
to animate the stripes right to left. Not available in IE9 and below.
Examples:
HTML Code:
Stacked
Place multiple bars into the same .progress
to stack them.