Spinner
A Spinner is an animation that communicates a loading state to users.
<Spinner decorative={false} title="Loading" size="sizeIcon80" />
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.
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.
Accessibility
You are required to set whether the Spinner is decorative or not, please follow the icon accessibility guidelines.
<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.
<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.
<Spinner color="colorTextSuccess" decorative={false} title="Loading" />