Use progress class to show default progress.

Use bg- class to progress bar class with the below-mentioned color variation to set the background color progress bar.

Add labels to your progress bars by placing text within the progress-bar.

Use bg- class to progress bar class with the below-mentioned color to change the appearance of individual progress bars.

Use progress-sm, progress-lg, or progress-xl class to set the different heights of progress.

Use progress-bar-striped class to add strip to the progress.

Use progress-bar-striped progress-bar-animated class to add strip with animation to the progress.

Use bg-gradient class to show gradient progress bar.

Use animated-progress class to show progress with animation.

Use animated-progress custom-progess class to show custom progress with animation.

Use animated-progress custom-progess progress-label class to show custom progress with animation and label.

Example of progress with content wrapped in progress.

Here is the example of progress which is represented by steps completion.

Use progress-step-arrow class to create step progress with an arrow.