Components

Progress Indicator

A progress indicator component communicates to the user the progress of a particular process.

BaseBase › DefaultBase › Next StepBase › Step - ErrorBase › TooltipBasedev ready

Preview

Code

<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>

The progress indicator communicates to the user which step of a process they may be on. The length of the progress bar can be changed by modifying the value on <progress class="slds-progress-bar" /> with JavaScript. The .slds-progress-bar accepts a range from 0% to 100%.

When a step becomes active, the .slds-progress__item should get the class .slds-is-active. This class should be applied through JavaScript. 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 should receive a "success" icon, providing feedback that the step has been completed.

ThemesThemes › DefaultThemes › ShadeThemesdev ready

Preview

Code

<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" aria-describedby="step-1-tooltip" title="settings">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
        </svg>
        <span class="slds-assistive-text">Step 1 - Completed</span>
      </button>
    </li>
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:25%;">
      <span class="slds-assistive-text">Progress: 25%</span>
    </span>
  </div>
</div>

ModalModaldev ready

Preview

Code

<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal--large" aria-labelledby="header43">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
      <h2 id="header43" class="slds-text-heading--medium">Modal Header</h2>
    </div>
    <div class="slds-modal__content slds-grow slds-p-around--medium"></div>
    <div class="slds-modal__footer slds-grid slds-grid--align-spread">
      <div class="slds-progress slds-progress--shade slds-order--2">
        <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" aria-describedby="step-1-tooltip" title="settings">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
              </svg>
              <span class="slds-assistive-text">Step 1 - Completed</span>
            </button>
          </li>
          <li class="slds-progress__item slds-is-active">
            <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
              <span class="slds-assistive-text">Step 2 - Active</span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
              <span class="slds-assistive-text">Step 3 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
              <span class="slds-assistive-text">Step 4 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
              <span class="slds-assistive-text">Step 5 </span>
            </button>
          </li>
        </ol>
        <div class="slds-progress-bar">
          <span class="slds-progress-bar__value" style="width:25%;">
            <span class="slds-assistive-text">Progress: 25%</span>
          </span>
        </div>
      </div>
      <button class="slds-button slds-button--neutral slds-order--1">Cancel</button>
      <button class="slds-button slds-button--brand slds-order--3">Save</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-progress
Applied to:

<div>

Outcome:

Initializes popover

Required:

Required

Comments:

--

.slds-progress__list
Applied to:

<ol>

Outcome:

An ordered list containing steps of a process

Required:

Required

Comments:

--

.slds-progress__item
Applied to:

<li>

Outcome:

A list item for each step of the process

Required:

Required

Comments:

--

.slds-progress__marker
Applied to:

<span>

Outcome:

Dot indicator for each step

Required:

Required

Comments:

--

.slds-progress__marker--icon
Applied to:

<a>

Outcome:

Modifier that notifies the marker indicator that the step has been completed and its getting an icon

Required:

Required

Comments:

--

.slds-progress-bar
Applied to:

<span>

Outcome:

Container for progress bar

Required:

Required

Comments:

<span> sits outside of <ol>

.slds-is-active
Applied to:

slds-progress__item

Outcome:

Stateful class for the active step

Required:

Required

Comments:

Class should be applied through JavaScript

.slds-is-completed
Applied to:

slds-progress__item

Outcome:

Stateful class for a completed step, .slds-progress__item should receive a success icon at this point

Required:

Required

Comments:

Class should be applied through JavaScript