Progress indicators inform users of an action’s progress, such as loading a page or submitting a form.
Progress indicators are used when retrieving data or performing actions that take a long time. Although they don’t show details about what is going on in the back-end, progress indicators reassure users that their action is being processed.
When using a progress indicator:
- Use only one type of progress indicator per page
- Be consistent by using the same type of progress indicator for the same kind of activity
- Include a short visible label that clearly explains what’s happening to the user
- Use ARIA to announce the progress indicator to screen reader users
- Only use if the wait time is expected to be longer than a second
Progress spinner and progress bar
The progress spinner and progress bar are two visually distinct types of progress indicators. Only one type should represent each kind of activity in an experience.
Determinate or indeterminate
A progress indicator can be determinate or indeterminate.
Determinate indicators display how long a process will take. They should be used in longer processes as they will increase the user’s willingness to wait.
Indeterminate indicators express an unspecified amount of wait time. They should be used when the wait time is unknown or the wait time is expected to be short enough that it’s not necessary to display.
Page loading indicators
If a user’s action changes the context of the whole page, a page loading indicator overlays the page and prevents the user taking any further actions until the process is complete. The page loading indicator can be used as a progress spinner or progress bar.
Progress indicators in components
A progress indicator can be placed inside a triggering component. Make sure that repeated clicks are disabled while the indicator is visible.
Accompany the progress indicator with a short label that explains the state of the process.
When the progress indicator is used with a button component, change the label of the button when the button is clicked to show that an action is taking place.