Loading Spinner
Animated indicator for work that is still in progress.
LoadingSpinner shows that work is in progress. Use it on its own for a small loading region. Wrap
final content to replace it in place.
Size
medium is the default. Set size to match the surrounding control or content.
With content
Pass final content with isLoading to replace it in place. While loading, the spinner keeps the
content's dimensions and disables interactive descendants. Set isLoading to false to reveal the
content.
Colour
Omit color to inherit the surrounding text colour. Set it only when the spinner needs to match
nearby semantic content.
Accessibility
The spinner is a polite status region. Its accessible name defaults to loading. Provide an
aria-label that names the work, such as Loading profile. While loading, the spinner hides
wrapped children from assistive technology and blocks focus and activation.
For a standard loading control, prefer Button pressAction or
isPending. Pending keeps the control focusable. Do not swap that behaviour for isDisabled with a
hand-rolled spinner.
API
LoadingSpinnerProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type