Progress indicator
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>
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