progress-indicator

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>

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 the appropriate context. 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">

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

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

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

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

In a Modal

<div>
  <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
    <div class="slds-modal__container">

On a Gray Background

<div class="slds-progress slds-progress_shade">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-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">

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

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

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