Page Views
1,600
Likes
345
Bugs Fixed
21
New Members
124
Gifts
16
Tasks
17

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

Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Topnav
Sidebar