Spinner

View source on GitHub

; Opens a new tab

Spinner helps indicate that a surface's content or portion of content is currently loading.

also known as Refresh Indicator, Refresh Control, Loader, Circular Loader, Loading Animation

Figma:

Web:

iOS:

Android:

A11y:

function SpinnerExample() {
  const [show, setShow] = React.useState(true);

  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

function SpinnerExample() {
  const [show, setShow] = React.useState(true);

  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

Props

Component props
Name	Type	Default
`accessibilityLabel` Required	`string`	-
	String that clients such as VoiceOver will read to describe the element. Always localize the label.
`show` Required	`boolean`	-
	Indicates if Spinner should be visible.
`delay`	`boolean`	-
	Whether or not to render with a 300ms delay. The delay is for perceived performance, so you should rarely need to remove it.
`size`	`"sm" \| "md"`	-
	sm: 32px, md: 40px

Usage guidelines

When to use

When loading or updating content on a surface.

When not to use

To communicate that a UI element, such as a button, is performing an action that takes a perceptible amount of time. Contact us if this is needed.

Accessibility

Ready

Variants

Example

Spinners indicate when a user has to wait for something else to occur. They delay showing for 300ms to improve perceived performance.

The label on a spinner is for accessibility. You should pick labels that relate to the specific part of the product it's being used in ("Loading homefeed" for instance).

function SpinnerExample() {
  const [show, setShow] = React.useState(false);

  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

function SpinnerExample() {
  const [show, setShow] = React.useState(false);

  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma across all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab