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

  • © 2016 December
  • $39K

    Expenses
  • $11K

    Net Profit
  • $29K

    Total Sales
  • Earnings this week
  • Design
    1:12PM, Thursday, November 19, 2016
    Development
    11:40AM, Sunday, November 22, 2016
    Demo Settings
    Fixed Header
    Boxed Layout
    Collapse Leftbar
    Topnav
    Sidebar