Jonathan Smith

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>

Label Progressbars

Info with progress-bar-inverse class.

70% Complete

Info with progress-bar-info class.

50% Complete

Info with progress-bar-success class.

20% Complete

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


Animated Progressbars

Animated progressbars with CSS3, just add a class active with progress-striped


Stacking progressbars

You can stack one progressbar on top of another simply by including them all in the same div.progress

  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: