Example
Default progress bar
HTML
React
Web Component
[**DEV**]View on React storybook
View on Web component storybook
Stacked progress bar
HTML
React
Web Component
[**DEV**]View on React storybook
View on Web component storybook
Anatomy
-
Indicator: Tells the users how far along in a process they are in.
Usage guidelines
Progress bar should be used:
- When you want to show users where they are in a process.
- When you want to amount completed, e.g when a user uploads a document.
Progress bar should not be used:
-
As a indicator when users are navigating from page to page.
Usability guidelines
Keeps progress bars moving
This allows users to know that their task is progressing. Users may associate a stationary indicator as a stalled process.
Use consistent progress bars
Do use one type of indicator bar style and not switch between as this may cause confusion to the user.
Progress bar design tokens