1. Home
  2. Components
  3. Progress

Progress

Stylize the HTML5 <progress> element.

Advanced CardButtons Extended

To caption a progress bar, simply add a <div> with your caption text, align the text using a utility class, and associate the caption with the <progress> element using the aria-describedby attribute.

Basic Progress

Reticulating splines… 0%
Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
Reticulating splines… 100%

Colored Progress

Progress bars use some of the same button and alert classes for consistent styles.

Custom Colored Progress

Progress bars using custom colors.

Striped Progress

Uses a gradient to create a striped effect.

Custom Colored Striped Progress

Custom Color striped progress effect.

Progress Sizes

Uses classes like .progress-xl,.progress-lg,.progress-sm & .progress-xs for Large, Small and Extra Small sized progress. For Default progress, No size class needed.