--- title: Progress Bar summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process. description: Track and display progress with a progress bar. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import ProgressBg from '@ui/ProgressBg.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Default markup To create a default progress bar, add a `.progress` class to a `
` 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: