Default progress bar
Striped progress bar
Animated progress bar
Stacked progress bar
Indicator: Tells the users how far along in a process they are in.
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.
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