Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Spinner

Version 14.1.1GithubStorybook

A Spinner is an animation that communicates a loading state to users.

Component preview theme
<Spinner decorative={false} title="Loading" size="sizeIcon80" />

Guidelines

Guidelines page anchor

About Spinner

About Spinner page anchor

The spinner is an icon component that can be used in situations where you would like to communicate a loading state to the user. It inherits a lot of properties from the Icon component.

(information)

Accessible animation

The spinner animation will automatically respect user preferences set at the operating system level via the prefers reduced motion API.

The default Spinner uses the default text color (color-text) and default icon size (icon-size-20), which is meant to be paired with our default text size.

(information)

Accessibility

You are required to set whether the Spinner is decorative or not, please follow the icon accessibility guidelines.

Component preview theme
<Spinner decorative={false} title="Loading" />

To resize the Spinner set a size prop. It will accept any valid icon size token as it's value. These are conveniently designed to be 1:1 to font sizing, e.g. font-size-40 can be paired with icon-size-40.

Component preview theme
<Stack orientation="horizontal" spacing="space30">
<Spinner size="sizeIcon10" decorative={false} title="Loading" />
<Spinner size="sizeIcon20" decorative={false} title="Loading" />
<Spinner size="sizeIcon30" decorative={false} title="Loading" />
<Spinner size="sizeIcon40" decorative={false} title="Loading" />
<Spinner size="sizeIcon50" decorative={false} title="Loading" />
<Spinner size="sizeIcon60" decorative={false} title="Loading" />
<Spinner size="sizeIcon70" decorative={false} title="Loading" />
<Spinner size="sizeIcon80" decorative={false} title="Loading" />
<Spinner size="sizeIcon90" decorative={false} title="Loading" />
<Spinner size="sizeIcon100" decorative={false} title="Loading" />
<Spinner size="sizeIcon110" decorative={false} title="Loading" />
</Stack>

The Spinner, like any other icon, can be re-colored to meet your needs. Set an color in the same way you would with an icon.

Component preview theme
<Spinner color="colorTextSuccess" decorative={false} title="Loading" />