Progress Bars are visual indicators that show a status (load time, form submission, etc.) in an attempt to provide feedback and minimize user tension.
Progress Bars | Basic Sass file: /_scss/components/progress-bars.scss
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Progress Bars | With Label Sass file: /_scss/components/progress-bars.scss
Remove the <span>
with .sr-only
class from within the progress bar to show a visible percentage.
To ensure that the label text remains legible even for low percentages, consider adding a min-width
to the progress bar.
Progress Bars | Contextual alternatives Sass file: /_scss/components/progress-bars.scss
Progress bars use some of the same button and alert classes for consistent styles.
Progress Bars | Striped Sass file: /_scss/components/progress-bars.scss
Uses a gradient to create a striped effect. Not available in IE9 and below.
Progress Bars | Animated Sass file: /_scss/components/progress-bars.scss
Add .active
to .progress-bar-striped
to animate the stripes right to left. Not available in IE9 and below.
Progress Bars | Stacked Sass file: /_scss/components/progress-bars.scss
Place multiple bars into the same .progress
to stack them.
35% Complete (success)
20% Complete (warning)
10% Complete (danger)