Example
Default progress bar
HTML
React
Web Component
View on React storybook
View on Web component storybook
Animated progress bar
HTML
React
Web Component
View on React storybook
View on Web component storybook
Stacked progress bar
HTML
React
Web Component
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