Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
<div class="progress"> <div class="bar" style="width: 45%;"></div> </div> <div class="progress"> <div class="bar" style="width: 60%;">60%</div> </div>
Progress bars use some of the same button and alert classes for consistent styles.
<div class="progress"> <div class="bar success" style="width: 40%;"></div> </div> <div class="progress"> <div class="bar info" style="width: 20%;"></div> </div> <div class="progress"> <div class="bar warning" style="width: 60%;"></div> </div> <div class="progress"> <div class="bar danger" style="width: 80%;"></div> </div>
Uses a gradient to create a striped effect. Not available in IE8.
<div class="progress striped"> <div class="bar success" style="width: 40%"></div> </div> <div class="progress striped"> <div class="bar info" style="width: 20%"></div> </div> <div class="progress striped"> <div class="bar warning" style="width: 60%"></div> </div> <div class="progress striped"> <div class="bar danger" style="width: 80%"></div> </div>
Add .active
to .striped
to animate the stripes left to right.
<div class="progress striped active"> <div class="bar" style="width: 45%"></div> </div>
Place multiple bars into the same .progress
to stack them.
<div class="progress"> <div class="bar success" style="width: 35%"></div> <div class="bar warning" style="width: 20%"></div> <div class="bar danger" style="width: 10%"></div> </div>