16 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix,!985Fix id anchor javascript,!13512.0 wip - relative font sizes,!1315[2.0-wip] Fix mustache glob when building,!1268[wip-2.0] IE 7/8 Typehead JS fix,!12362.0 wip - Fix for issue #1202,!1219Removed dotted outline on navbar dropdown menu,!1210Missing icon class from examples,!1195Fixed display of secondary container,!1090Fixed typo,!1084Default `.border-radius-custom` values,!1064Typo Fix in tables.less,!10572.0 wip,!1052Missing data attribute to close modal,!10212.0 wip
<h1>Progress bars <small>... for indicating progress</small></h1>
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
</div>
<h2>Examples and markup</h2>
<divclass="row">
<divclass="span3">
<h2>Basic bars</h2>
<p>Default look of progress bars. Absolute minimum.</p>
</div>
<divclass="span9">
<divclass="span4">
<h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p>
<divclass="progress">
<divclass="bar"style="width: 50%;"></div>
<divclass="bar"style="width: 60%;"></div>
</div>
<preclass="prettyprint linenums">
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
</pre>
</div>
</div>
<divclass="row">
<divclass="span3">
<h2>Striped bars</h2>
<p>Bars with stripes painted.</p>
</div>
<divclass="span9">
<divclass="span4">
<h3>Striped</h3>
<p>Uses a gradient to create a striped effect.</p>
<divclass="progress info striped">
<divclass="bar"style="width: 20%;"></div>
</div>
<preclass="prettyprint linenums">
<div class="progress info
striped">
<div class="bar"
style="width: 20%;"></div>
</div>
</pre>
</div>
</div>
<divclass="row">
<divclass="span3">
<h2>Active state</h2>
<p>Animated stripes! <small>Not on Opera, though :(</small></p>
</div>
<divclass="span3">
<divclass="span4">
<h3>Animated</h3>
<p>Takes the striped example and animates it.</p>
<divclass="progress danger active striped">
<divclass="bar"style="width: 45%"></div>
</div>
<preclass="prettyprint linenums">
<div class="progress danger
striped active">
<div class="bar"
style="width: 40%;"></div>
</div>
</pre>
</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 theire 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>
