2.3 KiB
| layout | title |
|---|---|
| page | Progress |
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.
Example
{% example html %} {% endexample %}
IE9 support
Internet Explorer 9 doesn't support the HTML5 <progress> element, but we can work around that.
{% example html %}
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
{% example html %} {% endexample %}
Striped
Uses a gradient to create a striped effect.
{% example html %} {% endexample %}
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, older versions of Firefox, and Opera 12 as they don't support CSS3 animations.
{% example html %} {% endexample %}