tabler/docs/content/ui/components/progress.mdx

---
title: Progress bar
summary: A progress bar shows how much of a task is done. It comes in sizes and colors, and in stacked, striped, animated and indeterminate variants.
description: Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.
related: [/ui/components/progress-step, /ui/components/spinner]
source: core/scss/ui/_progress.scss
classnames:
  component:
    - class: progress
      desc: Track element
  part:
    - class: progress-bar
      desc: The filled part; set its width and the ARIA value on it
  style:
    - class: progress-bar-striped
      desc: Diagonal stripes over the fill
  modifier:
    - class: progress-stacked
      desc: Wrapper for several tracks shown as one bar
    - class: progress-separated
      desc: Adds a gap between stacked segments
  behavior:
    - class: progress-bar-animated
      desc: Animates the stripes
    - class: progress-bar-indeterminate
      desc: Looping animation for an unknown amount of progress
  color:
    - class: bg-{color}
      desc: Any base color on the bar, for example bg-success
  size:
    - class: progress-sm
      desc: Thin track
    - class: progress-lg
      desc: Thick track
    - class: progress-xl
      desc: Extra thick track
---
import Example from '@components/Example.astro';
import ProgressBg from '@ui/ProgressBg.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Default markup

Add the `.progress` class to a `<div>` and put a `.progress-bar` inside it. The width of the inner bar is the value.

<Example>
<div class="progress">
  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
    <span class="visually-hidden">38% Complete</span>
  </div>
</div>
</Example>

## 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
<div class="progress progress-sm">...</div>
```

<Example columnFullWidth>
<div class="progress progress-sm">
  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
    <span class="visually-hidden">57% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
    <span class="visually-hidden">45% Complete</span>
  </div>
</div>
<div class="progress progress-lg">
  <div class="progress-bar" style="width: 63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" aria-label="63% Complete">
    <span class="visually-hidden">63% Complete</span>
  </div>
</div>
<div class="progress progress-xl">
  <div class="progress-bar" style="width: 82%" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-label="82% Complete">
    <span class="visually-hidden">82% Complete</span>
  </div>
</div>
</Example>

## Progress with value

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

<Example columnFullWidth>
<div class="progress progress-lg">
  <div class="progress-bar" style="width: 10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="10% Complete">10%</div>
</div>
<div class="progress progress-lg">
  <div class="progress-bar" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete">35%</div>
</div>
<div class="progress progress-lg">
  <div class="progress-bar" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="90% Complete">90%</div>
</div>
</Example>

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

<Example>
<div class="progress progress-sm" role="progressbar" aria-label="Loading"><div class="progress-bar progress-bar-indeterminate"></div></div>
</Example>

## Native progress element

The native `<progress>` element is styled too, so you can use it without any extra markup:

<Example>
<progress class="progress progress-sm" value="15" max="100" />
</Example>

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

<Example columnFullWidth>
<div class="progress">
  <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
    <span class="visually-hidden">24% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
    <span class="visually-hidden">45% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
    <span class="visually-hidden">64% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
    <span class="visually-hidden">38% Complete</span>
  </div>
</div>
</Example>

## 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
<div class="progress-stacked">
  <div class="progress">...</div>
</div>
```

<Example vertical column>
<div class="progress-stacked">
  <div class="progress" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="15% of total">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="30% of total">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" aria-label="20% of total">
    <div class="progress-bar bg-info"></div>
  </div>
</div>
</Example>

## Striped progress

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

<Example>
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 60%" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="60% Complete">
    <span class="visually-hidden">60% Complete</span>
  </div>
</div>
</Example>

## Animated progress

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

<Example columnFullWidth>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="40% Complete">
    <span class="visually-hidden">40% Complete</span>
  </div>
</div>
</Example>

## Separated progress

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

<Example vertical column>
<div class="progress-stacked">
  <div class="progress progress-separated" style="width: 10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="10% of total">
    <div class="progress-bar bg-blue"></div>
  </div>
  <div class="progress progress-separated" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" aria-label="20% of total">
    <div class="progress-bar bg-red"></div>
  </div>
  <div class="progress progress-separated" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="30% of total">
    <div class="progress-bar bg-green"></div>
  </div>
  <div class="progress progress-separated" style="width: 40%" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="40% of total">
    <div class="progress-bar bg-yellow"></div>
  </div>
</div>
</Example>

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

<Example columnFullWidth>
<ProgressBg value={65} text="Poland" showValue />
<ProgressBg value={35} text="Germany" showValue />
<ProgressBg value={28} text="United States" showValue />
<ProgressBg value={20} text="United Kingdom" showValue />
<ProgressBg value={15} text="France" showValue />
</Example>

## Progress background colors

You can combine progress background with contextual light colors to better separate categories.

<Example columnFullWidth>
<ProgressBg value={75} text="Success" color="success" showValue /> <ProgressBg value={60} text="Warning" color="warning" showValue /> <ProgressBg value={40} text="Danger" color="danger" showValue /> <ProgressBg value={90} text="Info" color="info" showValue />
</Example>

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

<CodeDocs name="progress-variables" file="core/scss/_variables.scss" />