Loading Indicator

Use a loading indicator when loading a new page or when committing a global action. If the on-page content is visible behind the loading indicator, pair it with an overlay to prevent users from interacting with on-page elements.

Contextual loading indicators give visual feedback that an in-page experience or component is responding to user action, such as pressing a button or loading page elements. The style varies visually from the global type in that a box and overlay are not intended for contextual use cases. Note that components housing the loading indicator do not flex or expand to accommodate the animation and optional label.

Loading indicators include two optional modifiers: a label and without a label.

Animation in the loading indicator consists of a spinner that rotates clockwise around the circle ring. The spinner is displayed as a quarter circle that sits on top of the circle ring, but does not grow to show progress. This component includes animation for prototyping in Figma.

Ensure each loading indicator meets the appropriate level of contrast
Both the label and animation must meet a contrast ratio of 3:1 or greater with the page background. Consider increasing available contrast when possible.
WCAG 2.1: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast (w3.org)

Use the top placement when loading a large area or full page of content
Including a label gives all users the clearest indication of what’s happening. As users typically read from top to bottom and left to right, placing the label on top means that the text explanation is the first thing they see.

If the same loading functionality occurs on a different page or screen in an application or set of pages, it should be identified with the same language
This reduces the cognitive load for people with cognitive difficulties.
WCAG 2.1: 3.2.4 Consistent Identification

Use a clear and concise label
The loading indicator’s label should be short, meaningful, and accurate to the pending action. Avoid using jargons. Technical language should be similarly avoided unless it’s absolutely critical to the understanding of the intended audience.
Do: Loading
Don’t: Page loading