Bootstrap/docs/components/progress.md

layout	title	group
docs	Progress	components

Stylize the HTML5 <progress> element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Example

{% example html %}

Reticulating splines… 0%

Reticulating splines… 25%

Reticulating splines… 50%

Reticulating splines… 75%

Reticulating splines… 100%

{% endexample %}

IE9 support

Internet Explorer 9 doesn't support the HTML5 <progress> element, but we can work around that.

{% example html %}

Reticulating splines… 25%

{% endexample %}

Contextual alternatives

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

{% example html %}

Reticulating successful splines… 25%

Reticulating informative splines… 50%

Reticulating warning splines… 75%

Reticulating dangerous splines… 100%

{% endexample %}

Striped

Uses a gradient to create a striped effect.

{% example html %}

Reticulating plain splines… 10%

10%

Reticulating successful splines… 25%

25%

Reticulating informative splines… 50%

50%

Reticulating warning splines… 75%

75%

Reticulating dangerous splines… 100%

100% {% endexample %}

Animated stripes

The striped gradient can also be animated. Add .progress-animated to .progress to animate the stripes right to left via CSS3 animations.

Animated progress bars do not work in IE9 and Opera 12 – as they don't support CSS3 animations – nor in IE10+ and Microsoft Edge – as they currently don't support CSS3 animations on the ::-ms-fill pseudo-element.

Reticulating splines… 25%

25% Toggle animation

{% highlight html %}

Reticulating splines… 25%

25% {% endhighlight %}