About Progress Indicator#

Implementation Requirements#

The slds-progress-bar accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the div with class slds-progress-bar__value using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators.

Accessibility#

As the percentage of completion changes, be sure to update the aria-valuenow property on the <div> with class="slds-progress-bar", as well as the slds-assistive-text <span>.

<div class="slds-progress-bar slds-progress-bar_x-small" 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>
  </span>
</div>

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Base#

<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker">

Horizontal#

Active Step#

When a step becomes active, the <div> with class .slds-progress__item should also get the class .slds-is-active.

Accessibility Requirements

When a step is active, be sure to append "- Active" to the hidden button text in the <span> with class slds-assistive-text, such as Step 1 - Active.

<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker">

Completed Step#

When the step is completed, the .slds-is-active class should be replaced with the class .slds-is-completed on .slds-progress__item. At that point, the .slds-progress__item element will receive a "success" icon, providing feedback that the step has been completed.

Accessibility Requirements

When a step is completed, be sure to append "- Completed" to the hidden button text in the <span> with class slds-assistive-text, such as Step 2 - Completed.

<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <button class="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" title="Step 1 - Completed">

Error in a Step#

When an error has occurred on a step, the <div> with class .slds-progress__item should also get the class .slds-has-error.

Accessibility Requirements

When a step has an error, be sure to append "- Error" to the hidden button text in the <span> with class slds-assistive-text, such as Step 3 - Error.

<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <button class="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" title="Step 1 - Completed">

Step Title Tooltip#

Accessibility Requirements

When a step's tooltip is visible, the step's button needs the aria-describedby attribute, whose value should be the id of the associated tooltip.

<div style="padding:3.5rem 1rem 0">
  <div class="slds-progress">
    <ol class="slds-progress__list">
      <li class="slds-progress__item slds-is-completed">

In a Modal#

<div>
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

On a Gray Background#

<div class="slds-progress slds-progress_shade">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <button class="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" title="Step 1 - Completed">

Vertical#

To display a vertical progress indicator, the <div> with class .slds-progress should also get the class .slds-progress_vertical. The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip.

Implementation Note

The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use <button> for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use <div>.

<div class="slds-progress slds-progress_vertical">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <span class="slds-icon_container slds-icon-utility-success slds-progress__marker slds-progress__marker_icon" title="Complete">

Green Success#

To create a green completed step, the .slds-progress__item element should also receive the .slds-is-completed class. In addition, the <span> with class .slds-progress__marker_icon should also get the class slds-progress__marker_icon-success.

<div class="slds-progress slds-progress_vertical">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <span class="slds-icon_container slds-icon-utility-success slds-progress__marker slds-progress__marker_icon slds-progress__marker_icon-success" title="Complete">

Error in a Step#

When an error has occurred on a step, the <div> with class .slds-progress__item should also get the class .slds-has-error.

<div class="slds-progress slds-progress_vertical">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <span class="slds-icon_container slds-icon-utility-success slds-progress__marker slds-progress__marker_icon" title="Complete">

Multiline Step Titles#

The vertical progress indicator also supports multiline step descriptions.

<div class="slds-progress slds-progress_vertical">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <span class="slds-icon_container slds-icon-utility-success slds-progress__marker slds-progress__marker_icon" title="Complete">