3.3 KiB
| layout | title | group |
|---|---|---|
| docs | Progress | components |
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
{% callout info %} Bootstrap Reference Documentation This is reference documentation from Bootstrap. It is being rendered with Material Design for Bootstrap to demonstrate default styling. See addons(TODO: add link) for additional Material Design elements. {% endcallout %}
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 %} {% 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 %}
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.
{% highlight html %} {% endhighlight %}