Progress indicator | Digital.NSW

A NSW Government website

Progress indicators show a user how far along they are in a process.

Demo
Rationale
Usage

Default

Use a progress indicator to let a user know how far along they are in the current process.

<div class="nsw-progress-indicator">
  <div class="nsw-progress-indicator__count">Step 3 of 5</div>
  <div class="nsw-progress-indicator__bar">
    <div class="nsw-progress-indicator__step nsw-progress-indicator__step--active"></div>
    <div class="nsw-progress-indicator__step nsw-progress-indicator__step--active"></div>
    <div class="nsw-progress-indicator__step nsw-progress-indicator__step--active"></div>
    <div class="nsw-progress-indicator__step"></div>
    <div class="nsw-progress-indicator__step"></div>
  </div>
</div>

Copy

Using a progress indicator helps manage a user's expectation of the time and effort involved to complete a task and convey a sense of progression.

As a user progresses through the steps of a process, the "Step" position is updated and the progress bar highlights the correlating sections to reflect the steps completed. The "Step _ of _" text can be use on it own (without the progress bar) when this alone communicates enough information to the user.

Use a progress indicator to let a user know how far along they are in the current process.

Do:

test your content without a progress indicator to see if it is required by the user
add where there is an evidence based user need to do so

When to avoid

Do not use a progress indicator:

when there are 2 or less steps in a process
as navigation between steps
when the exact number of steps may change