Use the custom progress component to display simple or complex progress bars. We need inline css when using progress bars. Click for Documentation

• We use the .progress as a wrapper to indicate the max value of the progress bar.
• We use the inner .progress-bar to indicate the progress so far.
• The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
• The .progress-bar also requires some role and aria attributes to make it accessible.

Add a .progress-bar-striped class to a .progress-bar to add a gradient line to the progress bar.

Add a .progress-bar-striped class to a .progress-bar to add a gradient line to the progress bar.

Add multiple progress bars into a progress component.

Insert text into the progress bar.

Insert text into the progress bar.