Progress indicators display an undefined wait time or illustrate the length of a certain process to a user.
Progress indicators help users estimate the status of ongoing processes, like waiting for an app to load, submitting a form, or saving updates.
Linear progress indicators support both determinate and indeterminate operations.
A. Indeterminate indicators should be used when a process completion cannot be determined.
B. Determinate indicators display how long a process will take. They should be used when a process completion can be determined.
Indeterminate (A) and determinate (B) linear progress indicators
Anatomy of linear progress indicators
Circular indicators can be used within a component to communicate that a process is loading. This is most commonly used as a progress indicator to let the user know the current screen is being refreshed.
A. Indeterminate (use when process completion cannot be determined)
B. Determinate (use when process completion can be determined)
Indeterminate (A) and determinate (B) circular indicators
Circular Indicator Loading
Circular progress indicators are positioned in the center of the screen. It represents the initial loading of the screen’s content.