Progress indicators visually represent how much of a task or operation has completed and how much is left. Use a bar for measurable progress and a spinner for short, indeterminate waits.
Figma
The Figma reference for Progress will appear here once the design link is added.
Storybook
Interactive examples for Progress will render here once the Storybook link is wired in.
Best practices
- Give people an indication of how much of the task has completed and how much remains.
- Don’t use a progress indicator for an entire page load — use skeletons for that.
- Use a spinner for short waits and for content that can’t be represented by skeletons, such as charts.
- Give a spinner an accessible label that describes the state: “Loading”, “Submitting”, “Processing”.
Do’s and don’ts
Do
Use a determinate bar when the remaining time is known.
Don’t
Show a spinner indefinitely with no context about what’s happening.
Accessibility
- Provide an accessible label so assistive technology can announce the purpose and state of the indicator.
- Keep the label short and accurate to the action in progress.