The Bootstrap 4 progress bar is a component that shows the progress or update of a process in which the user is involved. You can customize the color, shape, and animation of the progress bar.
Similarly, in your checkout process, you may also show how many steps are completed by way of the progress bar. The Bootstrap 4 progress bar can also be used for surveys or voting results by filling the bars with percentages, besides many other uses.
Labeled Progress Bar:
By using a labeled progress bar, you can display the text inside the progress bar to show the task completion percentage.
Height of Progress Bar:
By using the CSS height property, you can change the height of the progress bar. The default height of the progress bar is 16px. The height of the progress and progress bar container must be the same.
Stripped Progress Bar:
To create the striped progress bar, simply add .progress-bar-striped class to the .progress-bar element as shown in the below example.
Animated Progress Bar:
By using the .progress-bar-animated class, you can create an animated progress bar. Add the combination of .progress-bar, progress-bar-striped and progress-bar-animated to create an animated progress bar.
Colored Progress Bars:
By using the contextual background classes (bg-success, bg-info, etc), you may create progress bars with different colors. The progress bar default color is blue.
Striped Colored Progress Bars:
To create the striped progress bars with various colors, simply add contextual background classes with the .progress-bar-striped class to the .progress-bar element as shown in the below example.
Multiple Progress Bars:
You can also place multiple bars into the one progress bar to stack them as shown in the below example: