# Progressbars

###### Bootstrap progress bars visually represent the completion status of a task, with customizable colors, labels, and animated stripes.

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.

## Default Progressbar

The `.progress` is a wrapper to indicate the max value of the progress bar. We use the inner `.progress-bar` to indicate the progress so far. The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. You can add some role and aria attributes to make it accessible.

## Various height

Control the height by adding style `height:"value"` to `.progress` element or you could use the prebuilt classes for a more uniform structure, `.progress-xs`, `.progress-sm`, `.progress-md`, `.progress-lg`, `.progress-xl`

## Label display

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

## Solid backgrounds

Control the background by adding avaialble color pallets to `.progress` class

## Multiple bars

Include multiple progress bars in a progress component if you need

## Gradient backgrounds

Control the background by adding avaialble color pallets to `.progress` class

## Striped backrounds

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

## Animated bars

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

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode