Best practices
For dynamic flows the width of the progress bar should be defined by the approximated percentage wise completion of the flow.
When to use
- Use to visualise progress in a dynamic flow, where the number of steps can change based on user choices.
- Use for to indicate progress for system tasks, when loading progress can be tracked and translated into a bar indicator which fills the track from 0% to 100% and never decreases in value or resets - e.g. up/downloading files of a known size or processing of data.
When not to use
- Don’t use to indicate indeterminate loading states where the loading time can’t be calculated.
- Use the Spinner component instead.
- For flows with a fixed set of steps, consider using a step indicator.
Anatomy
- Progress bar: Indicates how much of the process has been completed.
- Container: The static area that the bar indicator moves on top of and acts as a fixed visual reference of the total length/duration of the process.
Behaviour
The progress bar fills the component based on the defined text direction (RTL/LFR).
Responsive behaviour
The component takes up 100% width of its parent element and scales accordingly.
Placement
Progress indicators are placed just below the header navigation on both mobile and desktop.
Transition
Moving from one value to another should be indicated by a simple animation, to make the change clear to user.
Variants
The component supports values from 0 to 100% in 10% increments.
