Spinner

A Spinner is an indeterminate loading indicator, ideal for processes with unknown or variable durations.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

A Spinner can appear alone or paired with a loading message. It can be used as a placeholder for content or to indicate some action is being processed.

For more on loading state design, see our loading guidelines.

React examples

Default

<Spinner />

<Spinner />

Custom size

LoadingLoadingLoading

<Stack direction="horizontal" align="center">
  <Spinner size="large" />
  <Spinner size="medium" />
  <Spinner size="small" />
</Stack>

<Stack direction="horizontal" align="center">
  <Spinner size="large" />
  <Spinner size="medium" />
  <Spinner size="small" />
</Stack>

Props

Spinner

Name	Required	Description
size		`'small' \| 'medium' \| 'large'` Sets the width and height of the spinner.
srText		`string \| null` Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page.
aria-label Deprecated		`string` Sets the text conveyed by assistive technologies such as screen readers.
className		`string`
data-*		`string`
sx		`SystemStyleObject`