Loading Spinner

Use LoadingSpinner to show an animated spinner while work is in progress. Wrap content in it to show the spinner in place of that content until loading finishes.

Loading children

Pass children along with isLoading to show the spinner in place of that content. While isLoading is true, the spinner replaces the children but preserves their dimensions, and any interactive descendants become unavailable. When isLoading is false, the children render normally.

Size

Use size to match the surrounding control or content. The default is medium. A surrounding icon size context can also set the size.

Colour

Use color to apply a semantic content colour. When you omit it, the spinner inherits the surrounding text colour.

Accessibility

The spinner has status semantics, a polite live region announced by assistive technology. Its accessible name defaults to loading; provide an aria-label that names the work, such as Loading profile. That name is rendered as visually hidden text inside the live region, so it is announced as region content rather than relying on the region's label alone. While loading, wrapped children are hidden from assistive technology and made inert, so they cannot be focused or activated.