Progress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.
Also known as:
ProgressProgress barProgress indicatorProgress trackerLoading barLoader
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Slider (not built)
- Split Button
- Tile Grid
- Toast Notification
- Give people feedback about progress.
- A static progress bar shows current progress through a process that will not progress without user interaction.
- A loading progress bar shows current progress through a loading process that the system will progress by itself without user interaction. We use animation to show that the system is operating.
- Static process or loading progress:
- Static: a static progress bar shows current progress through a process that will not progress without user interaction.
- Loading: a loading progress bar shows current progress through a loading process that the system will progress by itself without user interaction. We use animation to show that the system is operating.
- Initial value
- Moods: positive, informative, cautionary, negative
Give people feedback with progress bars.
- Progress track: This track shows the path the progress bar will take.
- Progress bar fill: This shows the completed progress visually as a colored bar.
- Progress value: This shows the completed progress as text, usually a percentage. Sometimes a fraction or ratio may be shown.
- Progress label: This describes the process that's in action.
- Use loading progress bars for system processes, such as downloading, uploading, or processing.
- Start progress bars on 1% instead of 0% to show the process has started, where it makes sense.
- A progress bar is not interactive.
- Avoid using indeterminate progress bars. Try to estimate how long a process will take or how many items it will process. A progress bar may start with an unknown amount of progress, then become determinate.
- In right-to-left (RTL) languages, start the progress bar fill from the right and fill towards the left as progress increases.
- Use the
roleto show that the element displays progress status.
- Use the
aria-valuemaxattributes to indicate progress completion.
- Use the
When to use
- Use a progress bar when it will give people feedback in a long-running process with continuous values.
When not to use
- For an unknown amount of time/progress, consider using a loading spinner instead.
- For loading content in a module, consider using a loading skeleton instead.
- For discrete steps, consider using a progress stepper instead.
- For an interactive element that lets people provide input to show progress, use a range slider.
Here are some examples of other existing design systems: