Online

Bootstrap - Progress Bars

Progress bars can be used for showing the progress of a task or action to the users. The following example will show you how to create a simple progress bar with vertical gradient.

Example :-

Result

40% Complete

Creating Progress Bar with Label

To show to the progress status as a percentage label just remove the with .sr-only class from within the progress bar as demonstrated in example above.

Example :-

Result

60%

Creating Stripped Progress Bar

To create the stripped progress bar just add an extra class .progress-striped to the .progress base class, as shown in the example below:

Example

Result

60% Complete

Animated Progress Bar

Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Example

Result

40% Complete

Stacked Progress Bar

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them as seen in the following example

Example

Result

40% Complete
30% Complete (info)
20%Complete (warning)