Progress Indicator notifies a user that loading of content is underway.
Progress indicators may be determinate or indeterminate:
- Determinate Indicators should be used when the process completion rate can be detected
Indeterminate indicators should be used when progress isn’t detectable
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
Use a progress indicator whenever the wait time is anticipated to be longer than three seconds.
- A linear indicator at the top of the screen can indicate loading all screen content
- Expanding items can place a linear indicator along their expanding edge to draw user attention to where new content will appear
- A circular indicator at the center of the screen can indicate loading all screen content
A circular indicator attached to a container, such as a card or a button, can indicate the process applies to that particular item
The behavior of the indicator is dependent on whether its’ determinate or indeterminate.
On Android, the “swipe to refresh” gesture displays a circular progress indicator to indicate that the UI is being refreshed.
Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track.
Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction.
We utilized the Material progress indicator component and applied primary brand color.
An optional message can be customized by a user.
Progress indicators inform the user of an action that is going to take some time to complete. They can be both modal, in which case they would block interaction and take up the entire screen while some global wait is being enforced, or only show up on part of the screen while some particular bit of user interface is updating.
- When global progress indicators should be modal and the only focusable element on screen.
- Otherwise they behave like an image with an optional animation simply informing the user of some delay.
- Progress indicators do not accept input focus.
- In the event of a modal progress indicator focus should go to either the element that was focused prior to the indicator being presented OR to the first content element, as if a screen change has occurred, depending on the nature of the UI update after the progress indicator is dismissed.
Screen Reader Expectations
- When focused directly a progress indicator should behave similarly to an image, without the “image” role announcement.
- The description of the progress indicator should denote progress and, when the context is not apparent from other elements on the page, describe what action the user is waiting for.
- Progress indicators may also come with a percentage of progress. When appropriate such progress announcements should be shared with the user via Accessibility Announcements or the use of Live Regions.