Loading indicator

The loading indicator is M3 Expressive's indicator for a short wait. It is a single CSS-only element and needs no JavaScript plugin. The shape morphs through a circle and four cookie shapes while the whole indicator rotates.

<span class="loading-indicator" role="status" aria-label="Loading"></span>

The element is empty, so it reports nothing on its own. Give the waiting state a name and make status text updates meaningful. Then check what assistive technology actually announces, because a name alone does not guarantee an announcement. The framework currently requires a named status. An indeterminate progressbar, which omits aria-valuenow, is also valid.

Contained

Add contained to put the indicator on a secondary-container circle and switch it to on-secondary-container. Use it over an image, a coloured surface, or anything else the plain indicator would get lost against.

<span class="loading-indicator contained" role="status" aria-label="Loading"></span>

Or a progress indicator?

Use it for short waits with unknown progress. It replaces most indeterminate circular uses. Keep a progress indicator for a process that will switch to a determinate value. Google's button guidance also keeps circular progress.

Tokens

Override any of these to retheme one indicator. The colours are role tokens, never raw hex.

<span class="loading-indicator"
      style="--md-comp-loading-indicator-active-indicator-color: var(--md-sys-color-error)"
      role="status" aria-label="Loading"></span>

prefers-reduced-motion: reduce stops both animations and leaves the circle.