Progress indicator Preview
A progress indicator lets someone know there’s a background task in progress.
Progress indicators should only be used for tasks that take longer than a second. If you’re loading new content with a known structure that doesn't block other UI from loading, use a shimmer.
Resources
Types
Circular
Circular progress indicators visualize progress by animating along a circular track.
Linear
Linear progress indicators visualize progress by animating along a linear track.
Behavior
Determinate and indeterminate progress
Progress indicators can be either determinate or indeterminate, depending on the needs of your app and the capabilities of the technology you’re building on.
Determinate
Determinate progress indicators let people know how much of a task has been completed and how much remains. Use determinate progress indicators whenever possible. They offer a better user experience than indeterminate progress indicators, since they communicate status and assure people things are still working.
Indeterminate
Sometimes, it’s not possible to gauge how long something will take and it’s necessary to use an indeterminate indicator. Indeterminate indicators don’t provide any reassurance that things are still working, so only use them for short tasks. Watching the indicators cycle for too long could make people think something’s gone wrong.
If enough data is gathered after a task starts and it becomes possible to communicate how much time is left, switch to a determinate progress indicator.
Layout
Progress indicators are often used to draw people’s attention to where new content will appear. For example, an indicator in the center of a screen communicates that a new page is loading. An indicator within a card tells people the card’s content is loading.
Be consistent when choosing and placing progress indicators within an experience. Use one type of indicator to represent a given process. For example, a refresh action might always be represented by a circular progress indicator beneath the app bar.
Switching the placement or the type of indicator can cause a disjointed and confusing experience.
Switching progress indicators for the same activity can cause confusion
Accessibility
Add an animating label while the activity indicator is on screen to let people who use TalkBack know what’s happening.
Content
Progress indicators can include text to further describe the process taking place. Labels should be short and descriptive without giving too much information. Don’t include a period.
