Progress
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
or
Get CoreUI PRO →
Progress Basic example

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the 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.

Progress Labels

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

25%
Progress Height

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

Progress Backgrounds

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

Progress Multiple bars

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

Progress Striped

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

Progress Animated 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.