` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.

## Progress size Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed. ```html

...

``` Look at the example below to see how it works:

## 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 You can also use the native HTML5 `` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like: ## Progress color You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar. See the [full list of available colors](/ui/base/colors) for more details.

## Multiple progress bars You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container. ```html

...

``` This is how it looks:

## 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 By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress. Thanks to this you can create a nice looking statistics section: ## 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 coloured 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. ## SCSS variables Use these SCSS variables to customize progress bars. The default values are: