Progress Indicator

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.

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

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 meet WCAG 2.1 AA accessibility guidelines.