CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore 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.