Progress indicator
A progress indicator displays the steps and progress through a journey.
Breakdown
Progress indicator is primarily used to inform the user of how many steps a journey has and also display their current progress through it.
Usage
A progress indicator represents completion progress like filling out a form. If you're not displaying progress, use a Meter.
It’s primary use is to indicate a journeys length and it’s secondary use is to indicate which step the users is currently on.
As you add steps to the progress bar the bars responsively resize to accommodate them.
Anatomy
Label
Progress indicator has a label above the the progress bars that displays the current form it is used on. This text is set in paragraph bold formatting.
Colour
The indicators are made from 100% and 25% fox red from our colour palette.
Vertical gap
Progress indicator has a 9px vertical gap between the bars and the text label.
Horizontal gap
Progress indicator has a 4px horizontal gap between each button.
Width
By default, a Progress indicator will fill it's parent container but a progress bar can be any width.
Accessibility
Progress indicators can only be interpreted by sighted users. Therefore you need to include a text description for assistive technologies like screen readers. For example, ‘Step 1 of 4’.
