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" role="progressbar">
  <span class="slds-progress-bar__value" style="width:25%">
    <span class="slds-assistive-text">Progress: 25%</span>

States

0% complete

Progress: 0%

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

25% complete

Progress: 25%

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

50% complete

Progress: 50%

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

75% complete

Progress: 75%

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

100% complete

Progress: 100%

<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" role="progressbar">
  <span class="slds-progress-bar__value" style="width:100%">
    <span class="slds-assistive-text">Progress: 100%</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>

Vertical

Progress: 25%

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

States

0% complete

Progress: 0%

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

25% complete

Progress: 25%

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

50% complete

Progress: 50%

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

75% complete

Progress: 75%

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

100% complete

Progress: 100%

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

Modifiers

Color

Progress: 75%

<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
  <span class="slds-progress-bar__value slds-progress-bar__value_success" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>

Radius

Progress: 75%

<div class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</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" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>

Small

Progress: 75%

<div class="slds-progress-bar slds-progress-bar_small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>

Medium

Progress: 75%

<div class="slds-progress-bar slds-progress-bar_medium" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>

Large

Progress: 75%

<div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
  <span class="slds-progress-bar__value" style="width:75%">
    <span class="slds-assistive-text">Progress: 75%</span>