Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.
Progress indicators look and animate in ways that reflect the status of a process. They are never simply decorative.
Progress indicators use animation to capture attention and inform users of an activity’s progress.
Progress indicators should be applied to all instances of a process (such as loading) in a consistent format (linear or circular).
Material Design offers two visually distinct types of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the app.
Progress indicators may be determinate or indeterminate:
Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected.
Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.
As more information about a process becomes available, a progress indicator can switch from an indeterminate to a determinate state.
The track is a fixed width rule, with set boundaries for the indicator to travel along.
The indicator animates along the length of the track.
Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
Linear progress indicators support both determinate and indeterminate operations.
The placement of a linear progress indicator can indicate the scope of a process. For example:
Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.
On Android, the “swipe to refresh” gesture displays a circular progress indicator to indicate that the UI is being refreshed.
Circular progress indicators support both determinate and indeterminate processes.
Circular progress indicators are positioned to indicate the process that they represent.
A circular indicator can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, isn’t available.
They should be used for short, indeterminate activities (between 2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.
<div class="mdc-progress-track lime-800"> <div class="indicator determinate" style="width: 70%;"></div> </div> <div class="mdc-progress-track lime-800"> <div class="indicator indeterminate"></div> </div> <div class="mdc-progress-track buffer lime-800"> <div class="buffered" style="width: 70%;"></div> <div class="buffer-indicator" style="width: 30%;"></div> <div class="indicator" style="width: 50%;"></div> </div>