Progress

Render Bootstrap progress indicators with labels, height controls, semantic variants, stacked bars, stripes, animation, and accessible value metadata.

How it works

A progress component has an outer <bs-progress> container and one or more <bs-progress-bar> children. The bar's now, min, and max values drive the rendered width and ARIA value metadata.

Provide a visible label or an accessible name when the value is meaningful to users. Progress bars use only HTML and CSS; application code updates the values when progress changes.

Bar sizing

The progress bar width is derived from the bar's current value and range. Use now, min, and max instead of hard-coded width styles.

Width

Use now to set the current value. The bar calculates its width from the default 0 to 100 range.

aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="0" aria-label="No progress" />
</bs-progress>
<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="25" aria-label="Quarter complete" />
</bs-progress>
<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="50" aria-label="Half complete" />
</bs-progress>
<bs-progress>
    <bs-progress-bar now="75" aria-label="Three quarters complete" />
</bs-progress>

Labels

Set label when the value should be announced by assistive technology. Place visible text in the bar body when users also need to see the label.

50%
aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="25" label="25 percent complete" />
</bs-progress>
<bs-progress>
    <bs-progress-bar now="50" label="50 percent complete">50%</bs-progress-bar>
</bs-progress>

Long labels

Long visible labels can overflow narrow bars. Use shorter visible text and a fuller accessible label when space is constrained.

10%
aspnet 

<bs-progress progress-height="Large">
    <bs-progress-bar now="10" label="Upload progress, ten percent complete">10%</bs-progress-bar>
</bs-progress>

Height

Use progress-height for built-in presets. The examples avoid raw inline style attributes so CSP validation exercises the component's captured style path.

55%
65%
aspnet 

<bs-progress progress-height="XXSmall" bottom-margin="Default3">
    <bs-progress-bar now="25" aria-label="Extra extra small progress example" />
</bs-progress>
<bs-progress progress-height="XSmall" bottom-margin="Default3">
    <bs-progress-bar now="35" aria-label="Extra small progress example" />
</bs-progress>
<bs-progress progress-height="Small" bottom-margin="Default3">
    <bs-progress-bar now="45" aria-label="Small progress example" />
</bs-progress>
<bs-progress progress-height="Large" bottom-margin="Default3">
    <bs-progress-bar now="55" label="55 percent complete">55%</bs-progress-bar>
</bs-progress>
<bs-progress progress-height="XLarge">
    <bs-progress-bar now="65" label="65 percent complete">65%</bs-progress-bar>
</bs-progress>

Backgrounds

Set variant on each bar to apply Bootstrap background color variants. Include text or an accessible label so color is not the only signal.

Primary
Success
Info
Warning
Danger
aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="25" variant="Primary" label="Primary progress">Primary</bs-progress-bar>
</bs-progress>
<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="35" variant="Success" label="Success progress">Success</bs-progress-bar>
</bs-progress>
<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="45" variant="Info" label="Info progress">Info</bs-progress-bar>
</bs-progress>
<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="55" variant="Warning" label="Warning progress">Warning</bs-progress-bar>
</bs-progress>
<bs-progress>
    <bs-progress-bar now="65" variant="Danger" label="Danger progress">Danger</bs-progress-bar>
</bs-progress>

Multiple bars

Place multiple bars in one progress container to show a stacked total. Each child bar keeps its own value, label, and variant.

15%
30%
20%
aspnet 

<bs-progress progress-height="Large">
    <bs-progress-bar now="15" variant="Primary" label="Primary segment">15%</bs-progress-bar>
    <bs-progress-bar now="30" variant="Success" label="Success segment">30%</bs-progress-bar>
    <bs-progress-bar now="20" variant="Info" label="Info segment">20%</bs-progress-bar>
</bs-progress>

Striped

Set striped on an individual bar, or set it on the parent progress to use stripes as the default for child bars.

Striped bar
Primary
Warning
aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="40" variant="Success" striped="true" label="Striped success progress">Striped bar</bs-progress-bar>
</bs-progress>
<bs-progress striped="true">
    <bs-progress-bar now="30" variant="Primary" label="Striped primary progress">Primary</bs-progress-bar>
    <bs-progress-bar now="25" variant="Warning" label="Striped warning progress">Warning</bs-progress-bar>
</bs-progress>

Animated stripes

Animated bars should also be striped. Set animated on the bar or on the parent progress container to apply it to child bars by default.

Animated bar
Info
Danger
aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="75" variant="Primary" striped="true" animated="true" label="Animated progress">Animated bar</bs-progress-bar>
</bs-progress>
<bs-progress striped="true" animated="true">
    <bs-progress-bar now="45" variant="Info" label="Animated info progress">Info</bs-progress-bar>
    <bs-progress-bar now="30" variant="Danger" label="Animated danger progress">Danger</bs-progress-bar>
</bs-progress>

Accessibility

The progress bar renders the progressbar role and value attributes from now. Provide an accessible name with label or aria-label, especially when the bar has no visible text.

aspnet 

<bs-progress bottom-margin="Default3">
    <bs-progress-bar now="60" label="Upload progress, 60 percent complete" />
</bs-progress>
<bs-progress>
    <bs-progress-bar now="80" variant="Success" aria-label="Import progress, 80 percent complete" />
</bs-progress>

CSS

Progress styling is provided by Bootstrap CSS variables and Sass. BCL helpers emit the same progress and progress-bar classes while deriving width and ARIA values from helper attributes.

Variables

Use Bootstrap's progress CSS variables through approved stylesheets when theming height, font size, background, border radius, and bar transition behavior.

Sass variables

Projects that compile Bootstrap Sass can adjust the progress defaults before building the CSS bundle consumed by the docs app.

Keyframes

Animated stripes depend on Bootstrap's progress-bar-stripes keyframes. The BCL animated attribute only applies the Bootstrap animation class.