2014-03-17 03:03:53 +01:00
< div class = "bs-docs-section" >
< h1 id = "progress" class = "page-header" > Progress bars< / h1 >
2014-07-09 10:39:34 +02:00
< p class = "lead" > Stylize the HTML5 < code > < progress> < / code > element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.< / p >
2014-03-17 03:03:53 +01:00
< h3 id = "progress-basic" > Basic example< / h3 >
< p > Default progress bar.< / p >
< div class = "bs-example" >
2014-07-09 10:39:34 +02:00
< progress class = "progress" value = "0" max = "100" > 0%< / progress >
< progress class = "progress" value = "25" max = "100" > 25%< / progress >
< progress class = "progress" value = "50" max = "100" > 50%< / progress >
< progress class = "progress" value = "75" max = "100" > 75%< / progress >
< progress class = "progress" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
< / div >
{% highlight html %}
2014-07-09 10:39:34 +02:00
< progress class = "progress" value = "0" max = "100" > 0%< / progress >
< progress class = "progress" value = "25" max = "100" > 25%< / progress >
< progress class = "progress" value = "50" max = "100" > 50%< / progress >
< progress class = "progress" value = "75" max = "100" > 75%< / progress >
< progress class = "progress" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
{% endhighlight %}
2014-07-09 10:39:34 +02:00
< h3 id = "progress-ie9" > Internet Explorer 9 support< / h3 >
< p > IE9 doesn't support the HTML5 < code > < progress> < / code > element, but we can work around that.< / p >
2014-03-17 03:03:53 +01:00
< div class = "bs-example" >
2014-07-09 10:39:34 +02:00
< progress class = "progress" value = "25" max = "100" >
< div class = "progress" >
< span class = "progress-bar" style = "width: 25%;" > 25%< / span >
2014-03-17 03:03:53 +01:00
< / div >
2014-07-09 10:39:34 +02:00
< / progress >
2014-03-17 03:03:53 +01:00
< / div >
{% highlight html %}
2014-07-09 10:39:34 +02:00
< progress class = "progress" value = "25" max = "100" >
< div class = "progress" >
< span class = "progress-bar" style = "width: 25%;" > 25%< / span >
2014-03-17 03:03:53 +01:00
< / div >
2014-07-09 10:39:34 +02:00
< / progress >
2014-03-17 03:03:53 +01:00
{% endhighlight %}
< h3 id = "progress-alternatives" > Contextual alternatives< / h3 >
< p > Progress bars use some of the same button and alert classes for consistent styles.< / p >
< div class = "bs-example" >
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-success" value = "25" max = "100" > 25%< / progress >
< progress class = "progress progress-info" value = "50" max = "100" > 50%< / progress >
< progress class = "progress progress-warning" value = "75" max = "100" > 75%< / progress >
< progress class = "progress progress-danger" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
< / div >
{% highlight html %}
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-success" value = "25" max = "100" > 25%< / progress >
< progress class = "progress progress-info" value = "50" max = "100" > 50%< / progress >
< progress class = "progress progress-warning" value = "75" max = "100" > 75%< / progress >
< progress class = "progress progress-danger" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
{% endhighlight %}
< h3 id = "progress-striped" > Striped< / h3 >
2014-07-09 10:39:34 +02:00
< p > Uses a gradient to create a striped effect.< / p >
2014-03-17 03:03:53 +01:00
< div class = "bs-example" >
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-striped" value = "10" max = "100" > 10%< / progress >
< progress class = "progress progress-striped progress-success" value = "25" max = "100" > 25%< / progress >
< progress class = "progress progress-striped progress-info" value = "50" max = "100" > 50%< / progress >
< progress class = "progress progress-striped progress-warning" value = "75" max = "100" > 75%< / progress >
< progress class = "progress progress-striped progress-danger" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
< / div >
{% highlight html %}
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-striped" value = "10" max = "100" > 10%< / progress >
< progress class = "progress progress-striped progress-success" value = "25" max = "100" > 25%< / progress >
< progress class = "progress progress-striped progress-info" value = "50" max = "100" > 50%< / progress >
< progress class = "progress progress-striped progress-warning" value = "75" max = "100" > 75%< / progress >
< progress class = "progress progress-striped progress-danger" value = "100" max = "100" > 100%< / progress >
2014-03-17 03:03:53 +01:00
{% endhighlight %}
< h3 id = "progress-animated" > Animated< / h3 >
2014-07-09 10:39:34 +02:00
< p > Add < code > .progress-animated< / code > to < code > .progress< / code > 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.< / p >
2014-03-17 03:03:53 +01:00
< div class = "bs-example" >
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-striped progress-animated" value = "25" max = "100" > 25%< / progress >
2014-03-17 03:03:53 +01:00
< / div >
{% highlight html %}
2014-07-09 10:39:34 +02:00
< progress class = "progress progress-striped progress-animated" value = "25" max = "100" > 25%< / progress >
2014-03-17 03:03:53 +01:00
{% endhighlight %}