Progress Indicator

Formerly known as Wizard.

As an e-commerce progress indicator, where users can click on the step title and jump around from step to step. (ex. Amazon)
As a tracker, where users are monitoring the progress, without having the ability to interact with it. (ex. Fedex)

Progress Indicators are made with a grid, in a flexible manner for size customization. They should easily accept more or fewer list items. A Progress Indicator must not have more than 5 steps, if you need more than 5 steps, please consider using a different component like a navigation bar Each step must have a label and a status; Help text is optional. Help text space can be used for other content types like badges/pills Progress Indicators are preferably created using <ol> ordered lists—though <ul> unordered lists or any other element which makes semantic sense can be used with the classes— with each step as a <li>. The steps need to have a .progress-indicator-title in them. Optionally, they can have additional information by creating a .progress-indicator-item element containing .step-current, .step-warning, and any badges, pills, etc.

Four Progress Indicator default step variations

Step completed
Step error or incomplete
Current step
Not yet started

Step completed
Create successful/completed styling with.step-complete or .step-success.
Step error / warning
Create error styling with .step-error or .step-warning.
Current step
Create current step styling with.step-current. On the current step, add aria-current="step" as an attribute on the li element.
Not yet started
This is the default for steps, there is no need to add any extra classnames to achieve this look.

Step 3 out of 4

Step label goes here

Linear Progress Indicator default step variations

A linear Progress Indicator, where users have to complete one step before proceeding to the next. The labels should not be styled as links. This example shows a progress indicator without the optional help text.

Step completed
Step error / warning
Current step
Not yet started
Not yet started

Step 3 out of 5

Step label goes here


   <div class="progress-indicator-wrapper">
    <ol class="progress-indicator">
      <li class="progress-indicator-item step-complete">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step 1: Step completed</span>
        </div>
      </li>
      <li class="progress-indicator-item step-error">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step 2: Step error / warning</span>
        </div>
      </li>
      <li class="progress-indicator-item step-current" aria-current="step">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step 3: Current step</span>
        </div>
      </li>
      <li class="progress-indicator-item">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step 4: Not yet started</span>
        </div>
      </li>
      <li class="progress-indicator-item">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step 5: Not yet started</span>
        </div>
      </li>
    </ol>
    <div class="progress-indicator-mobile-wrapper">
     <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></button>
      <div>
      <p class="help-text mb-1">Step 3 out of 4</p>
      <p class="progress-indicator-mobile-title">Step label goes here</p>
    </div>
      <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg></button>
    </div>
  </div>

Non-linear Progress Indicator

Non-linear allows the user to jump from section to section, this is why the titles are links. The links should take the user to that section of the form / page.

Step completed
Create successful/completed styling with.step-complete or .step-success.
Step error / warning
Create error styling with .step-error or .step-warning.
Current step
Create current step styling with.step-current. On the current step, add aria-current="step" as an attribute on the li element.
Not yet started
sub-text for help

Step 3 out of 4

Step label goes here


  <div class="progress-indicator-wrapper">
    <ol class="progress-indicator">
      <li class="progress-indicator-item step-complete">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title"><a href="#">Step completed</a></span>
          <p class="progress-indicator-desc">Create successful/completed styling with<code>.step-complete</code> or
            <code>.step-success</code>.</p>
        </div>
      </li>
      <li class="progress-indicator-item step-error">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title"><a href="#">Step error / warning</a></span>
          <p class="progress-indicator-desc">Create error styling with <code>.step-error</code> or <code
            >.step-warning</code
          >.</p>
        </div>
      </li>
      <li class="progress-indicator-item step-current" aria-current="step">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Current step</span>
          <p class="progress-indicator-desc">Create current step styling with<code>.step-current</code>. On the
            current step, add
            <code>aria-current="step"</code> as an attribute on the <code>li</code
            > element.</p>
        </div>
      </li>
      <li class="progress-indicator-item">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title"><a href="#">Not yet started</a></span>
          <p class="progress-indicator-desc">sub-text for help</p>
        </div>
      </li>
    </ol>
    <div class="progress-indicator-mobile-wrapper">
      <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></button>
      <div>
      <p class="help-text mb-1">Step 3 out of 4</p>
      <p class="progress-indicator-mobile-title">Step label goes here</p>
    </div>
      <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg></button>
    </div>
  </div>

Linear Progress Indicator with badge

Completed step
Success
Step error / warning
Warning
Current step
default

Step 3 out of 3

Step label goes here


    <div class="progress-indicator-wrapper">
    <ol class="progress-indicator">
      <li class="progress-indicator-item step-current" aria-current="step">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Current step</span>
          <p class="progress-indicator-desc"><span class="badge badge-success">Success</span></p>
        </div>
      </li>
      <li class="progress-indicator-item step-warning">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Step error / warning</span>
          <p class="progress-indicator-desc"><span class="badge badge-warning">Warning</span></p>
        </div>
      </li>
      <li class="progress-indicator-item">
        <div class="progress-indicator-content">
          <span class="progress-indicator-title">Next step</span>
          <p class="progress-indicator-desc"><span class="badge">Incomplete</span></p>
        </div>
      </li>
      
    </ol>
    <div class="progress-indicator-mobile-wrapper">
      <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></button>
      <div>
      <p class="help-text mb-1">Step 3 out of 3</p>
      <p class="progress-indicator-mobile-title">Step label goes here</p>
    </div>
      <button class="progress-indicator-mobile-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="50" height="25"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg></button>
    </div>
  </div>