<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
</div>
</div>
<h2>Examples and markup</h2>
<h2>Examples and markup</h2>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>Basic</h3>
<h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p>
<p>Default progress bar with a vertical gradient.</p>
<divclass="progress">
<divclass="progress">
<divclass="bar"style="width: 60%;"></div>
<divclass="bar"style="width: 60%;"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress">
<div class="progress">
<div class="bar"
<div class="bar"
style="width: 60%;"></div>
style="width: 60%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>Striped</h3>
<h3>Striped</h3>
<p>Uses a gradient to create a striped effect.</p>
<p>Uses a gradient to create a striped effect.</p>
<divclass="progress info striped">
<divclass="progress info striped">
<divclass="bar"style="width: 20%;"></div>
<divclass="bar"style="width: 20%;"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress info
<div class="progress info
striped">
striped">
...
@@ -1201,13 +1273,13 @@
...
@@ -1201,13 +1273,13 @@
style="width: 20%;"></div>
style="width: 20%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>Animated</h3>
<h3>Animated</h3>
<p>Takes the striped example and animates it.</p>
<p>Takes the striped example and animates it.</p>
<divclass="progress danger active striped">
<divclass="progress danger active striped">
<divclass="bar"style="width: 45%"></div>
<divclass="bar"style="width: 45%"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress danger
<div class="progress danger
striped active">
striped active">
...
@@ -1215,34 +1287,75 @@
...
@@ -1215,34 +1287,75 @@
style="width: 40%;"></div>
style="width: 40%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
</div>
</div>
<h2>Options and browser support</h2>
<divclass="row">
<divclass="span4">
<h3>Additional colors</h3>
<p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
</ul>
<p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
</div>
<divclass="span4">
<h3>Behavior</h3>
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
<p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
</div>
<divclass="span4">
<h3>Browser support</h3>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
<p>Opera does not support animations at this time.</p>
<p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
</ul>
<p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
</div>
<divclass="span4">
<h3>Behavior</h3>
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
<p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
</div>
<divclass="span4">
<h3>Browser support</h3>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
<p>Opera does not support animations at this time.</p>
<h1>{{_i}}Progress bars{{/i}}<small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
<h1>{{_i}}Progress bars{{/i}}<small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Examples and markup{{/i}}</h2>
<h2>{{_i}}Examples and markup{{/i}}</h2>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Basic{{/i}}</h3>
<h3>{{_i}}Basic{{/i}}</h3>
<p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
<p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
<divclass="progress">
<divclass="progress">
<divclass="bar"style="width: 60%;"></div>
<divclass="bar"style="width: 60%;"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress">
<div class="progress">
<div class="bar"
<div class="bar"
style="width: 60%;"></div>
style="width: 60%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Striped{{/i}}</h3>
<h3>{{_i}}Striped{{/i}}</h3>
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
<divclass="progress info striped">
<divclass="progress info striped">
<divclass="bar"style="width: 20%;"></div>
<divclass="bar"style="width: 20%;"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress info
<div class="progress info
striped">
striped">
...
@@ -1136,13 +1208,13 @@
...
@@ -1136,13 +1208,13 @@
style="width: 20%;"></div>
style="width: 20%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
<divclass="span4">
<divclass="span4">
<h3>{{_i}}Animated{{/i}}</h3>
<h3>{{_i}}Animated{{/i}}</h3>
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
<divclass="progress danger active striped">
<divclass="progress danger active striped">
<divclass="bar"style="width: 45%"></div>
<divclass="bar"style="width: 45%"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="progress danger
<div class="progress danger
striped active">
striped active">
...
@@ -1150,31 +1222,72 @@
...
@@ -1150,31 +1222,72 @@
style="width: 40%;"></div>
style="width: 40%;"></div>
</div>
</div>
</pre>
</pre>
</div>
</div>
</div>
</div>
<h2>{{_i}}Options and browser support{{/i}}</h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Additional colors{{/i}}</h3>
<p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
</ul>
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Behavior{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Browser support{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
<p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
<ul>
<li><code>.info</code></li>
<li><code>.success</code></li>
<li><code>.danger</code></li>
</ul>
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Behavior{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Browser support{{/i}}</h3>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
