Progress bar

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.

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.

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

Progress size

Add a size class such as .progress-sm to make the bar thinner or thicker. The names follow the usual Bootstrap pattern.

<div class="progress progress-sm">...</div>

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

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%

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

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.

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

Native progress element

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

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

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 for more details.

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

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.

<div class="progress-stacked">
  <div class="progress">...</div>
</div>

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

Striped progress

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

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

Animated progress

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

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

Separated progress

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

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

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:

Poland

65%

Germany

35%

United States

28%

United Kingdom

20%

France

15%

<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 65%" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-label="65% Complete">
      <span class="visually-hidden">65% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">Poland</div>
  <div class="progressbg-value">65%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete">
      <span class="visually-hidden">35% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">Germany</div>
  <div class="progressbg-value">35%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 28%" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" aria-label="28% Complete">
      <span class="visually-hidden">28% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">United States</div>
  <div class="progressbg-value">28%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" aria-label="20% Complete">
      <span class="visually-hidden">20% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">United Kingdom</div>
  <div class="progressbg-value">20%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="15% Complete">
      <span class="visually-hidden">15% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">France</div>
  <div class="progressbg-value">15%</div>
</div>

Progress background colors

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

Success

75%

Warning

60%

Danger

40%

Info

90%

<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-success-lt" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
      <span class="visually-hidden">75% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">Success</div>
  <div class="progressbg-value">75%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-warning-lt" 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>
  <div class="progressbg-text">Warning</div>
  <div class="progressbg-value">60%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-danger-lt" 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>
  <div class="progressbg-text">Danger</div>
  <div class="progressbg-value">40%</div>
</div>
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-info-lt" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="90% Complete">
      <span class="visually-hidden">90% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">Info</div>
  <div class="progressbg-value">90%</div>
</div>

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:

$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;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`progress`	component	Track element
`progress-bar`	part	The filled part; set its width and the ARIA value on it
`progress-bar-striped`	style	Diagonal stripes over the fill
`progress-stacked`	modifier	Wrapper for several tracks shown as one bar
`progress-separated`	modifier	Adds a gap between stacked segments
`progress-bar-animated`	behavior	Animates the stripes
`progress-bar-indeterminate`	behavior	Looping animation for an unknown amount of progress
`bg-{color}`	color	Any base color on the bar, for example bg-success
`progress-sm`	size	Thin track
`progress-lg`	size	Thick track
`progress-xl`	size	Extra thick track

Menu

Progress bar

Default markup

Progress size

Progress with value

Indeterminate progress

Native progress element

Progress color

Multiple progress bars

Striped progress

Animated progress

Separated progress

Progress background

Progress background colors

Accessibility

SCSS variables

Class reference

On this page

130 sleek illustrations for your startup's visual identity.

Menu

Progress bar

Default markup

Progress size

Progress with value

Indeterminate progress

Native progress element

Progress color

Multiple progress bars

Striped progress

Animated progress

Separated progress

Progress background

Progress background colors

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.