Progress indicator
Progress indicators show a user how far along they are in a process.
Show code Hide code
Usage
Use a progress indicator to let a user know how far along they are in the current process. Using a progress indicator helps manage a user's expectation of the time and effort involved to complete a task and show a sense of progression.
Guidance
- 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
- use a progress indicator when there are 2 or less steps in a process
- use a progress indicator as navigation between steps
- use a progress indicator when the exact number of steps may change
How this component works
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.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.