Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline'
, then you won't be able to use inline style
attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width
) or using custom CSS classes.
Default progress bar.
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 use some of the same button and alert classes for consistent styles.
Uses a gradient to create a striped effect. Not available in IE9 and below.
Add .active
to .progress-bar-striped
to animate the stripes right to left. Not available in IE9 and below.
Place multiple bars into the same .progress
to stack them.