Spinner
Overview
Definition
A circular-shaped rotating indicator that represents an undetermined amount of time or progress.
Similar components
- Progress bar (coming soon)
- Skeleton loader (coming soon)
Guidelines
A spinner represents an undisclosed amount of time to load new information. Just because it doesn’t show the time elapsed or left, an experience should not have to wait an extremely long time.
It can be used on its own or within other components. If it is used within another component, think about the size in relation to the rest of the information. You can hide things when the Spinner is active. Or, will things be disabled while the Spinner is visible?
Content
- There’s no content on its own, but if you place a Spinner in a button with text it should reflect the change. Or, if you use a larger Spinner—when a page is loading for example—you may want to provide supporting text.
Interactions
- Something has to trigger the spinner. That could be an interaction with a button, or when moving between screens and something small needs to load. (If it’s the whole page that needs to load, a skeleton loader would be better.)
- The default will not allow someone to stop the interaction once it is initiated. A new trigger would need to be added for that functionality.
- Work with tech to determine a timeout amount for your specific experience.
Visual
Do
They can be used in other components.
Do
There are a few default sizes and colors, but they can get smaller or larger if needed. The colors can change, just make sure they have the appropriate contrast with the background color.
Specs
Default specs, can be changed with use case
| Small | Medium | Large | |
| Icon size | spacing-04 | spacing-06 | spacing-07 |
| Icon color | $ink-300 | ||
| Border size | border-width-md | ||
Accessibility
- While the icon doesn’t need be AA WCAG accessible, it’s still best practice to make it match the visibility guidelines.
- Any text associated with the Spinner needs to be active and readable to assistive technology.