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.
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.
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.
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.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok