Spinner

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

Page navigation navigation

React

ready

Storybook|Source|Usage

Rails

ready

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	Default	Description
size		`'small' \| 'medium' \| 'large'` Sets the width and height of the spinner.
srText	`Loading`	`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`
delay	`false`	`boolean \| 'short' \| 'long' \| number` Controls whether and how long to delay rendering the spinner. Set to `true` to delay by 1000ms, `'short'` to delay by 300ms, `'long'` to delay by 1000ms, or provide a custom number of milliseconds.