Current Balance
$71,182
Account Type
Business Plan A
Monthly
$19.99
Upgrade Account
Backend Development
Today 25%
Bug Fix
Tomorrow 17%
Javascript Code
70%
Preparing Documentation
6%
App Development
20%
View all Pending
1.31 GB of 1.50 GB used
87.3%

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.

Task #1
25%
Task #2
50%
Task #3
3%
Task #4
33%
Task #5
78%
Task #6
44%
<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>