Component Blueprints

Progress Bar

A progress bar component communicates to the user the progress of a particular process.
Einstein Setup Assistant
Progress: 25%

About Progress Bar#

Base#

Progress: 25%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:25%">
    <span class="slds-assistive-text">Progress: 25%</span>
  </span>

States#

0% complete#

Progress: 0%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:0%">
    <span class="slds-assistive-text">Progress: 0%</span>
  </span>

25% complete#

Progress: 25%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:25%">
    <span class="slds-assistive-text">Progress: 25%</span>
  </span>

50% complete#

Progress: 50%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:50%">
    <span class="slds-assistive-text">Progress: 50%</span>
  </span>

75% complete#

Progress: 75%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>

100% complete#

Progress: 100%
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:100%">
    <span class="slds-assistive-text">Progress: 100%</span>
  </span>

Examples#

Descriptive Progress Bar#

Einstein Setup Assistant
Progress: 25%
<div>
  <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small" id="progress-bar-label-id-4">
    <span>Einstein Setup Assistant</span>
    <span aria-hidden="true">

Vertical#

Progress: 25%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:25%">
    <span class="slds-assistive-text">Progress: 25%</span>
  </span>

States#

0% complete#

Progress: 0%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:0%">
    <span class="slds-assistive-text">Progress: 0%</span>
  </span>

25% complete#

Progress: 25%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:25%">
    <span class="slds-assistive-text">Progress: 25%</span>
  </span>

50% complete#

Progress: 50%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:50%">
    <span class="slds-assistive-text">Progress: 50%</span>
  </span>

75% complete#

Progress: 75%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>

100% complete#

Progress: 100%
<div class="slds-progress-bar slds-progress-bar_vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="height:100%">
    <span class="slds-assistive-text">Progress: 100%</span>
  </span>

Modifiers#

Radius#

Progress: 75%
<div class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>

Thickness#

X-Small
Progress: 75%
<div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>
</div>
Small
Progress: 75%
<div class="slds-progress-bar slds-progress-bar_small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>
</div>
Medium
Progress: 75%
<div class="slds-progress-bar slds-progress-bar_medium" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>
</div>
Large
Progress: 75%
<div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="{{Placeholder for description of progress bar}}" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>
  </span>
</div>

Overview of CSS Classes#

Selector.slds-progress-bar
Summary
Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-progress-bar_x-small
Summary

Creates a progress bar height at the smaller .125rem (2px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_small
Summary

Creates a progress bar height at the smaller .25rem (4px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_medium
Summary

Creates a progress bar height at the smaller .5rem (8px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_large
Summary

Creates a progress bar height at the smaller .75rem (12px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_circular
Summary

Adds a border radius to the progress bar to give it a circular look

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar__value
Summary

Fill up blue bar inside of the progress bar

Restrict.slds-progress-bar span
Selector.slds-progress-bar__value_success
Summary

Create a green progress bar

Restrict.slds-progress-bar__value
ModifierTrue
Selector.slds-progress-bar_vertical
Summary

Create a vertical progress bar

Supportdev-ready
Restrict.slds-progress-bar
VariantTrue

Progress Bar Release Notes

2.16.0

Added

  • Added aria-label attribute to the div with role of progressbar to meet accessibility requirements.

2.7.0

Added

  • Updated the documentation for vertical progress bars. Now you can actually see it, yay!