Loading indicator
Loading indicators inform users of an action’s progress, such as loading a page or submitting a form.
How to use loading indicators
Loading 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 within the system, loading indicators reassure users that their action is being processed.
When using a loading indicator:
- Use only one type of loading indicator per page
- Be consistent by using the same type of loading 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 loading indicator to screen reader users
- Only use if the wait time is expected to be longer than a second
Types of loading indicator
Progress Spinner
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 loading 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.
Content guidelines
Accompany the loading indicator with a short label that explains the state of the process.
When the loading 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.