Progress Bars
Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Default Progress Bars
Default progress bars are simple and css driven.
Primary with progress-bar-primary class.
Info with progress-bar-info class.
Success with progress-bar-success class.
Warning with progress-bar-warning class.
Danger with progress-bar-danger class.
Inverse with progress-bar-inverse class.
<div class="progress"> <div class="progress-bar progress-bar-primary" style="width: 20%"></div> </div>
Striped Progress Bars
Sriped Progress bars made with CSS3 gradients, just add the progress-striped class
Note Does not work with browsers that do not support CSS3 gradients or animations, like IE9
Info
Animated Progressbars
Animated progressbars with CSS3, just add a class active with progress-striped
Inverse
Stacking progressbars
You can stack one progressbar on top of another simply by including them all in the same div.progress
Progress Bars
Contextual Progressbars
Have thinner progress bars with details.
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #1</div>
<div class="progress-percentage">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 25%"></div>
</div>
</div>