Progress indicator

By digitalnsw_service on Wed, 11/12/2019 - 11:29

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

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