Do

• Use a circular progress indicator if the wait time exceeds one second.

• Use a circular progress indicator for the following scenarios:

  • User-triggered content refresh by pulling down or up.
  • Partial screen loading that requires blocking user interactions.
  • Full-screen processing, such as during payment checkout.

Don't

Don’t use a circular progress indicator for wait times under one second.

A. Indicator

B. Track

C. Label (Optional)

Anatomy of determinate and indeterminate circular progress indicators in active state

A. Indicator (Hidden by Track)

B. Track

C. Validation Message

Anatomy of circular progress indicators in error/fail (left) and success state (right)

Labels are optional and should only be used when the process takes 10 seconds or more. They should be concise and, ideally, not exceed one line of text.

If the length of the text exceeds the available space, the text wraps into the next line and the progress indicator will keep its position on the top. Wrapping is not recommended and is only available for mobile window sizes ranging from 0-599 dp. Labels can’t exceed two lines of text.

Text wrapping example of a circular progress indicator

Value States

If an error occurs or a process fails, the loading animation stops. The indicator turns red and the entire track fills with the error color.

Labels are mandatory and should always inform the user what kind of error/fail happened and how this issue can be resolved. The message should be as concise as possible. Follow the guideline for indicators with a label.

Error/fail state behavior of a circular progress indicator

The success state is triggered after the successful completion of a process or request. The indicator turns red and the entire track fills with the success color.

Depending on the use case, you can choose one of the following options for the success indicator

• Persisting until the user triggers another action, such as closing or changing screens
• Disappearing after 3 seconds

Labels are mandatory for the success message and should be concise. A short information about the completed process or the executed action is sufficient, for example, “Download completed”. One line of text is recommended.

Success state behavior of a circular progress indicator

The circular loading indicator appears at the top of the existing content when the user triggers the content refresh by swiping down the page. This action loads new data from the server and displays it in the interface. The indicator disappears once the loading process is complete, or when the user navigates away from the content that is being refreshed.

The swipe-to-refresh behavior should be used with dynamic content sorted in descending order. In these cases, the most recent content always appears on top. Common examples are inboxes sorted by descending date, or other types of lists and card collections.

Swipe-down behavior of the circular progress indicator

The circular loading indicator appears at the bottom of the existing content when a user scrolls beyond the end of the data that the application has loaded in memory. The indicator disappears when the loading process is complete, or when the user navigates away from the content that is being refreshed.

Scroll-up behavior of the circular progress indicator

A. Determinate Circular Progress Indicator

The determinate circular progress indicator moves from 0 to 360 degrees along an invisible circular track and fills it with color. This variation is used when the process completion can be determined.

Determinate circular progress indicator

B. Indeterminate Circular Progress Indicator

Indeterminate circular progress indicators grow and shrink in size as they move along an invisible track. They should be used when the process completion can’t be determined, or when it is not necessary to indicate how long an activity will take.

Indeterminate circular progress indicator

C. Indeterminate to Determinate Circular Progress Indicator

The indicator can switch from an indeterminate state to a determinate state. It should be used when an indeterminate process reaches a point where its duration can be determined and the loading animation can be stopped.

Circular progress indicator (indeterminate to determinate)

C. Circular Progress Indicator with Label

• Labels are optional to communicate the status and progress. If there is nothing to communicate, then having no label is valid.
• Only include labels to give extra context or to provide useful information. For example, what information the progress bar is processing. Avoid using terms such as “loading” that don’t add any value.
• Use sentence style capitalization.
• We recommend including a progress value, for example, 60%, 30/100, etc., at the end of the label for determinate indicators to show how much of the process is already completed, the current progress, and how much is remaining.
• The display of the progress value is under application control. The application should be able to turn the progress value off.
• Keep labels short – we recommend one line of text.

Circular progress indicator with label

Checkout use cases are processing states triggered by user actions. During a checkout process, any user action on the affected content is not encouraged; it may interrupt the process. Use only the indeterminate variant in these cases. A checkout use case can be one of the following types:

A. Same-Screen Loading

A circular progress indicator can be used when a screen is in progress to transition to a new screen, triggered by a user action. The circular progress indicator is placed in a message box on top of a dialog overlay. The message is used to briefly inform users about the progress. The dialog overlay and the message disappear once the loading is complete.

If needed, use a banner or a snackbar to inform users about an error state.

Same-screen loading example with a circular progress indicator in a message box

B. Partial Loading

A circular progress indicator can be used when a part of the screen content needs to be loaded or refreshed. The circular progress indicator is placed on the top of an overlay that covers the content. The progress indicator and the overlay disappear once the loading is complete. No message is needed for a partial loading use case.

If needed, use a banner or a snackbar to inform users about an error state.

Partial loading example with a circular progress indicator on top of a card

In-place loading scenarios occur when loading is initiated by a button. An indicator within the button shows the loading state.

We recommend using an indeterminate indicator inside a loading button, but only if the loading process takes a few seconds. If the loading time is too short or too long, opt for a regular circular progress indicator instead. Once loading is complete, the button reverts back to its original state or changes to a different icon button.

Loading in an object cell

To display the exact progress, it’s best to use a linear progress indicator. You can also change the button to a disabled state if required. Once loading is completed, the button either transforms into a new button or changes back to its original state.

Loading in an object cell with a linear progress indicator

When using the TalkBack feature, any changes to a button's state should be announced while it's focused. If loading fails, notify the user with a snackbar. If the icon button transforms into a different icon button after loading, TalkBack should announce the new button's function and, if necessary, provide context about the function, for example, downloading selected file.