Create Bootstrap progress bar: 6 demos

The progress bar component in web pages

You may need progress bars in web pages for different reasons, for example, showing the progress of uploading a file and letting the user know by way of progress bar that shows the percentage of the file being uploaded.

Similarly, downloading a file, showing the progress of a long task that may involve saving the information in different databases on different servers etc.

In this tutorial, the Bootstrap based progress bars are created that you may integrate into your web pages quite easily. Functionality wise, it is up to you how to handle it.

A demo of progress bar Bootstrap with label

The bootstrap has a few built-in classes for creating the progress bars. You simply need to use the progress class in the main div containing progress bar. In the inner div, use the progress-bar class where you may specify different attributes including the label that shows the current progress value. Have a look:

See online demo and code

The simple markup used for creating the progress bar using Bootstrap classes:

 

See the live demo and get complete code from the demo page. I used progress-bar-danger class for showing the red color for the progress.

Using warning color in progress bar demo

In this demo, the progress-bar-warning class is used for creating the “yellowish” color bar. Basically, this is just like the button or alert classes used for different colors, have a look:

See online demo and code

The markup:

 

Similarly, you may use the progress-bar-info for light blue color, progress-bar-success for the green etc. The default is primary color i.e. blue.

A demo of creating stripped progress bar

In this demo, a striped progress bar is created by using the built-in progress-bar-striped class along with progress-bar and progress-bar-info classes.

See online demo and code

The markup:

 

The striped bar style is accomplished by using the gradient.

A demo of animated and striped progress bar

By adding the .active class in above demo of striped progress bar, you may create an animated progress bar as shown in the demo below:

See online demo and code

The code:

 

You can see, the animation from right to left in the progress bar.

A demo of multi-colored progress bar

By using multiple progress bars within the main div containing progress class, you may create multi-color progress bar by using Bootstrap. Have a look at the following demo where I used info, danger and success colors for creating a progress bar with simple and striped style by using the active class:

See online demo and code

The code:

 

A demo of progress bar with box-shadow

In this demo, the box-shadow property of CSS is used for the container of the progress bar. Apart from that, a few built-in properties of Bootstrap are overridden for the customization of the progress bar. For example, the properties of progress class are changed along with the active class. The animation property of CSS is also used for showing the progress in three seconds duration.

Have a look and get the complete code from the demo page:

See online demo and code

The CSS used in example:

 

The markup:

 

Have a look at the live demo by clicking the above links.