` 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.

## 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. ## SCSS variables Use these SCSS variables to customize progress bars. The default values are: