Create Post
2
Contacts
10
Messages
3
Gallery
Settings
Plugins
Jane Smith Back

Hey! How's it going?

1:20:42 PM

Not bad... i guess. What about you? Haven't gotten any updates from you in a long time.

1:20:46 PM

Yeah! I've been a bit busy lately. I'll get back to you soon enough.

1:20:54 PM

Alright, take care then.

1:21:01 PM

Account Summary
Current Balance
$71,182
Account Type
Business Plan A
Monthly
$19.99
Upgrade Account

Pending Tasks (5)
Backend Development
Today 25%
Bug Fix
Tomorrow 17%
Javascript Code
70%
Preparing Documentation
6%
App Development
20%
View all Pending

Storage Space
1.31 GB of 1.50 GB used
87.3%

Server Status
  1. Dashboard
  2. UI Components
  3. Progress Bars

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.

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>