4.3 KiB
| layout | title | group |
|---|---|---|
| docs | Progress | components |
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs
{% callout info %} Bootstrap Reference Documentation This is a part of the reference documentation from Bootstrap. It is included here to demonstrate rendering with Material Design for Bootstrap default styling. See the Material Design section for more elements and customization options. {% 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
To caption a progress bar, simply add a <div> with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the <progress> element using the aria-describedby attribute.
{% example html %}
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 %}