Description

Progress indicators show that an operation is currently ongoing. They display the current completion ratio of an operation or a visual animation that conveys an unspecified wait time.

Types 

There are two visually-distinct types of progress indicator: linear and circular.

Only one type should represent each kind of activity in an application. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere.

Usage & Behavior

Progress indicators inform users about the status of ongoing processes, such as loading a page, submitting a form, or saving updates. They communicate an application's state and indicate available actions, such as whether users can navigate away from the current screen.

General guidelines

Structure

Progress indicators consist of:

• A track. The fixed area which the indicator bar travels along. For circular indicators, the track is invisible.

• The indicator bar. The animated colored area which moves along the track.

Placement and Positioning

Linear progress indicators should only be placed at the top or in the center of a container or component. For example:

A linear progress indicator attached to the top a container, such as a card, indicates that the process applies to that particular item, and that interaction with the rest of the UI is possible.
A linear progress indicator at the center of the screen should indicate that the screen content is loading, and that no interaction is possible until the process is completed.

When integrated to form elements (such as file upload), it may be placed to the right of the field it relates to. It may also be placed underneath the field depending on available space or responsive design.

A circular progress indicator can be placed: at the center of the screen, indicating that the screen content is loading, and that no interaction is possible until the process is completed. at the center of component, such as a widget or a card, indicating that the process applies to that particular item, and that interaction with the rest of the UI is possible. In a Toast message (if a progress indicator is needed) replacing the Toast status icon.

Default State

• Determinate linear progress indicators may be hidden or shown in their empty state by default. When shown, they can indicate that an action may be a lengthy operation. For example, a form submission which is expected to take several minutes to complete should show the linear progress indicator in its empty state to set the user’s expectations.

• Indeterminate linear progress indicators should be hidden by default and only appear once active. On completion, the linear progress indicator should be hidden again, and in most cases replaced by the content that was loaded or a post-completion message.

• Circular progress indicators should be hidden by default and only appear once active. On completion, the circular progress indicator should be hidden again, and in most cases replaced by the content that was loaded. In the case of integration with a component such as a button, the component is returned to its default state.

States

Common states such as hover, active, focused and error do not apply to progress indicators, as user interaction is not possible.

Linear

State	Determinate	Indeterminate
Empty
Partially complete
Complete		NA
Disabled

Circular

State	Determinate	Indeterminate
Empty
Partially complete
Complete		NA
Disabled

Interaction

Progress indicators do not support user interaction. They are solely used to provide a visual status indicator. The exception to this is where circular progress indicators are integrated into a button with a built-in cancel operation.

Best practices

Use:

• A linear indicator can be integrated into form elements, such as file uploads, to express a connection between a background ongoing process and individual items. They are ideal for long determinate activities (over 10 seconds).

Don’t Use:

• When the action lasts less than 1 second.

General:

• Consider adding informative text to tell the user what is happening or explain why they are waiting. Provide a general time estimate for time-consuming tasks. Don’t try to be exact: This might take five minutes can be enough to encourage users to wait.

• Make sure that long operations offer the ability to cancel during the process.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Content authors should provide values of aria-valuemin, aria-valuemax, and aria-valuenow where the aria-valuemax is known. Further guidelines for optimum compliance can be found at ARIA progressbar role.

Design

Zeplin link	Screen thumbnail
https://zpl.io/VOOxOnk

Code