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.
Determinate indicators display how long a process will take. They should be used when a process completion can be measured.
Circular indicators can be used within a button or card component. 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)
Circular Indicator Within a Button
A circular indicator can be used within a button to show that the action for which the button initiates is in progress. They should be used for short inter-determinate activities (2 to 5 seconds). If it is longer than that, use a snackbar or a push notification as an alternative.
Circular Indicator Loading
Circular progress indicators are positioned in the center of the screen. It represents the initial loading of the screen’s content.
Determinate circular progress indicator
Determinate Linear Progress Indicator
Indeterminate & Determinate Circular Indicator
|Track||#800A6ED1 or #0A6ED1 with 50% opacity|
|Button indicator progress||#FFFFFF|