Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Cross-browser compatibility

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.

Content Security Policy (CSP) compatibility

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.

Basic example

Default progress bar.

{% highlight html %}

{% endhighlight %}

With label

Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.

60%

{% highlight html %}

60%

{% endhighlight %}

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

{% highlight html %}

{% endhighlight %}

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

{% highlight html %}

{% endhighlight %}

Striped

Uses a gradient to create a striped effect. Not available in IE9 and below.

{% highlight html %}

{% endhighlight %}

Animated

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

{% highlight html %}

{% endhighlight %}

Stacked

Place multiple bars into the same .progress to stack them.

{% highlight html %}

{% endhighlight %}