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

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

...

``` ```html

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

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

``` ## Native progress element The native `` element is styled too, so you can use it without any extra markup: ```html ``` ## 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. ```html

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

...

``` ```html

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

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

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

``` ## 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: ```html

Poland

65%

Germany

35%

United States

28%

United Kingdom

20%

France

15%

``` ## Progress background colors You can combine progress background with contextual light colors to better separate categories. ```html

Success

75%

Warning

60%

Danger

40%

Info

90%

``` ## 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. ## SCSS variables Use these SCSS variables to customize progress bars. The default values are: ```scss $progress-height: 0.5rem; $progress-font-size: $font-size-base * 0.75; $progress-bg: var(--border-color); $progress-border-radius: var(--border-radius); $progress-box-shadow: var(--box-shadow-inset); $progress-bar-color: $white; $progress-bar-bg: var(--primary); $progress-bar-animation-timing: 1s linear infinite; $progress-bar-transition: width 0.6s ease; $progress-height-sm: 0.25rem; $progress-height-lg: 0.75rem; $progress-height-xl: 1rem; $progressbg-padding-y: 0.25rem; $progressbg-padding-x: 0.5rem; $progressbg-value-padding-start: 2rem; $progress-separated-ring-width: 2px; $progress-steps-gap: 0.25rem; $progress-steps-item-height: 0.25rem; ``` _Source: `core/scss/_variables.scss`_