Progress Tracker

The progress tracker is a horizontal bar that visually represents progress through a set of steps in a given process. It is only used for user-controlled tasks of determinate duration. For information on indeterminate system progress, see the loading and progress guidelines.

Variants

Standard

The standard progress tracker indicates steps as circles along a horizontal line. Each circle has three states: default when it is not yet started (steps 4 and 5), active when it is underway (step 3) and complete when that step is finished (steps 1 and 2).

This tracker is used at the top of a page where the step is being completed. The step name should be prominently displayed on the page and is therefore not duplicated in the tracker.

 <div class="c-progress-tracker">
  <ul>
    <li class="c-progress-tracker--complete"></li>
    <li class="c-progress-tracker--complete"></li>
    <li class="c-progress-tracker--active">3</li>
    <li class="c-progress-tracker--default">4</li>
    <li class="c-progress-tracker--default">5</li>
  </ul>
</div>

Copy

Step 1

Step 2

Step 3

Step 4

Step 5

Context

The context variant labels each step to give more context into the entire process or a current status. Use this variant when the tracker is not used during task completion, for example in a modal or tooltip that give additional information about the process as a whole or a step within it.

<div class="c-progress-tracker">
  <ul class="progress-tracker__context">
    <div>
      <li class="c-progress-tracker--complete"></li>
      <span class="c-progress-tracker__text">Step 1</span>
    </div>
    <div>
      <li class="c-progress-tracker--complete"></li>
      <span class="c-progress-tracker__text">Step 2</span>
    </div>
    <div>
      <li class="c-progress-tracker--active">3</li>
      <span class="c-progress-tracker__text">Step 3</span>
    </div>
    <div>
      <li class="c-progress-tracker--default">4</li>
      <span class="c-progress-tracker__text">Step 4</span>
    </div>
    <div>
      <li class="c-progress-tracker--default">5</li>
      <span class="c-progress-tracker__text">Step 5</span>
    </div>
  </ul>
</div>

Copy

Accessibility

Use aria-label="progress" on the parent element to provide context to screen readers. Use aria-current="true" on the active step.

Design Environment

The progress tracker is generally used near the top of the page, above the title of the current step. The tracker will span the full width of its parent container. Limit the number of steps included in the tracker to five high-level steps. The steps in the tracker are not interactive. Provide components, like buttons and links for navigation.

Microcopy

The labels in the context progress tracker should be identical to the step names in the process. Keep step names as concise as possible.