--- layout: page title: Progress --- Stylize the HTML5 `` element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support. ### Example {% example html %} 0% 25% 50% 75% 100% {% endexample %} ### IE9 support Internet Explorer 9 doesn't support the HTML5 `` 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 %} 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 %} 25% {% endexample %}