CoreUI Progress has been created as an extension of Bootstrap Progress. Progress is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.

For more information please visit our official documentation.
ProgressBasic example

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t usethe HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

ProgressLabels

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

25%
ProgressHeight

We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.

ProgressBackgrounds

Use background utility classes to change the appearance of individual progress bars.

ProgressMultiple bars

Include multiple progress bars in a progress component if you need.

ProgressStriped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

ProgressAnimated stripes

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.