#### Elevate Your Design with CoreUI PRO!

Unlock a world of possibilities: More themes, enhanced components (Date Picker, Multi Select, and more), and priority support.

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.