Bootstrap Progress Bar

Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the work done and also the remaining work.

In bootstrap 4, the progress component is created by using  two HTML elements, CSS, some attributes instead of using default <progress> element of HTML 5.

Bootstrap 4 has several designs of progress bars, such as stacked bars, text labels, animated backgrounds, etc.

Syntax

Basic Progress Bar

A basic progress bar is a simple or default progress bar that has a gray background and represents the progress of a task using primary colors.

Steps of creating Progress Bar

  • Add the .progress class in the parent <div> element. This class is used as a wrapper for representing the max value of the progress bar.
  • Add the .progress-bar class to the child <div> element that represents the progress of the task.
  • Add the width property for setting the height of the progress bars.

Syntax

Output

Bootstrap 4 Progress Bar

Progress Bar Height

Bootstrap supports the predefined properties of CSS that helps in setting the width of the progress bar accordingly. The default height of the progress bar is 16px. The CSS height property is used with the .progress  class to set the height of the progress bar.

Note: The height of the progress bar and progress bar container should always be the same.

Syntax

Output

Bootstrap 4 Progress Bar

Progress Bar Labels

The progress bar label is used to add text in the progress bar, especially for representing the progress percentage of the task that has been completed.

To add the labels in the progress bar, you have to add your text just before the closing </div> tag.

Syntax

Output

Bootstrap 4 Progress Bar

Colored Progress Bars

Just like the other components of the progress bar, you can also set the color of the progress bar according to your need. The default color of the progress bar is blue (primary). The bootstrap 4 contextual classes are used to set the color of the progress bar.

Syntax

Output

Bootstrap 4 Progress Bar

Striped Progress Bar

 The progress bar that has stripes with CSS color gradient over the background color of the progress bar is known as a striped progress bar.

Add the .progress-bar-striped class along with the .progress-bar class and contextual color class for creating a striped progress bar.

Syntax

Output

Bootstrap 4 Progress Bar

Animated Progress Bar

We can also animate the progress bar from right to left by using CSS 3 animation.  For creating animated progress bar you have to add the .progress-bar-animated class along with the .progress-bar class and .progress-bar-striped class.

Note: We can only animate the striped progress bars and not the default progress bars.

Syntax

Output

Bootstrap 4 Progress Bar

Multiple Progress Bar

Bootstrap also offers the class that helps in creating multiple progress bars in the single line. You can create more than one progress bar of different colors in a single progress bar. The multiple progress bar is created when you want to display the progress of more than one task into a single progress bar. 

Syntax

Output

Bootstrap 4 Progress Bar

Pin It on Pinterest

Share This