0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/docs/components/progress.md
Patrick H. Lauke aeb179a3d8 update progress bar documentation
clarify lack of support for striped and animated striped bars in
IE10+/Edge
2015-12-11 08:58:11 +00:00

2.9 KiB
Raw Blame History

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 %} 0% 25% 50% 75% 100% {% endexample %}

IE9 support

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

{% example html %}

25%
{% endexample %}

Contextual alternatives

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

{% example html %} 25% 50% 75% 100% {% endexample %}

Striped

Uses a gradient to create a striped effect.

{% example html %} 10% 25% 50% 75% 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.

25% Toggle animation

{% highlight html %} 25% {% endhighlight %}