Progress bars

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.

Basic example

Default progress bar.

{% highlight html %} 0% 25% 50% 75% 100% {% endhighlight %}

Internet Explorer 9 support

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

{% highlight html %}

25%

{% endhighlight %}

Contextual alternatives

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

{% highlight html %} 25% 50% 75% 100% {% endhighlight %}

Striped

Uses a gradient to create a striped effect.

{% highlight html %} 10% 25% 50% 75% 100% {% endhighlight %}

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.

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