Progress Bars

Progress Styles

A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars.

Basic Progress
65% Complete
With Label
45%
Stacked
25% Complete (info)
20% Complete (warning)
10% Complete (success)
Striped
70% Complete (danger)
Animated
50% Complete
Indicating
90% Complete
Contextual Alternatives

Use contextual classes .progress-bar-* for apply any colour suited according to the nature of the task.

12% Complete
20% Complete
35% Complete
50% Complete
70% Complete
Progress Bar Sizes

Add additional class .progress-xs, progress-sm, or progress-lg for thinner or large version of the default progress

60% Complete
60% Complete
60% Complete
60% Complete