` and put a `.progress-bar` inside it. The width of the inner bar is the value.

## Progress size Add a size class such as `.progress-sm` to make the bar thinner or thicker. The names follow the usual Bootstrap pattern. ```html

...

```

## Progress with value If you want to display the numeric value inside the bar, place the percentage text directly in the `.progress-bar`.

10%

35%

90%

## Indeterminate progress You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element. Leave `aria-valuenow` off - a `progressbar` with no value is what tells a screen reader the amount is unknown, rather than zero.

## Native progress element The native `` element is styled too, so you can use it without any extra markup: ## Progress color Add a `bg-*` class such as `.bg-success` to the `.progress-bar` to change its color. See the [full list of available colors](/ui/base/colors) for more details.

## Multiple progress bars Put several `.progress` elements inside a `.progress-stacked` container to show the parts of a whole in one bar, for example the share of each file type in the used storage. ```html

...

```

## Striped progress You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.

## Animated progress To animate stripes, add the `.progress-bar-animated` class to a striped progress bar.

## Separated progress Use `.progress-separated` to make stacked segments easier to read when values are close to each other.

## Progress background A progress bar can also be the background of a row or a tile, so the row itself fills up as the value grows. It suits a ranking or a long-running goal, such as a fundraising target. This example uses it for a ranking of countries: ## Progress background colors You can combine progress background with contextual light colors to better separate categories. ## Accessibility - Put `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax` on the element that carries the value, and give it an `aria-label`. Without them a bar is a colored box with no meaning. - On a stacked bar the width sits on each `.progress` segment, so the role and the value belong there, not on the inner `.progress-bar`. - An indeterminate bar keeps the role but has no `aria-valuenow`. A missing value is what says "unknown", while `aria-valuenow="0"` says "nothing done yet". - Repeat the number in text next to the bar, or in a `visually-hidden` span inside it. Not every screen reader announces a progress value on its own. - Do not update the value on every frame. Screen readers announce each change, so round to whole percentages and update only when the number really moves.