role status
Spinner draft v0.1.0
Says that something is loading when its length is unknown, as a turning ring with a label.
A spinner is the indeterminate loading indicator: a ring turns while a request, a page or a part of it loads, and a label names what loads, shown or kept for assistive technology. Use it for short waits in a small area (a button, a panel); for a long or measurable wait, a Progress bar; for content whose layout is known, Skeletons. Other systems call it an activity indicator, a loading indicator or a progress circle.
Tokens
From packages/tokens/src/components/spinner.tokens.json. Path grammar: spinner.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (1)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
spinner.container.gap
Between the ring and a visible label.
|
dimension |
{space.8}
|
8px
|
--spinner-container-gap
|
Part ring (11)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
spinner.ring.size.small
|
dimension |
{size.2}
|
16px
|
--spinner-ring-size-small
|
spinner.ring.size.medium
|
dimension |
{size.4}
|
24px
|
--spinner-ring-size-medium
|
spinner.ring.size.large
|
dimension |
{size.5}
|
32px
|
--spinner-ring-size-large
|
spinner.ring.border-width.small
|
dimension |
{stroke-width.md}
|
1.2px
|
--spinner-ring-border-width-small
|
spinner.ring.border-width.medium
|
dimension |
{stroke-width.lg}
|
2.4px
|
--spinner-ring-border-width-medium
|
spinner.ring.border-width.large
|
dimension |
{stroke-width.lg}
|
2.4px
|
--spinner-ring-border-width-large
|
spinner.ring.border-color
The still part of the ring.
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--spinner-ring-border-color
|
spinner.ring.color
The moving arc.
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--spinner-ring-color
|
spinner.ring.animation.duration
|
duration |
{duration.normal}
|
250ms
|
--spinner-ring-animation-duration
|
spinner.ring.animation.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--spinner-ring-animation-easing
|
spinner.ring.opacity
Low point of the opacity pulse shown under reduced motion.
|
number |
{opacity.40}
|
0.4
|
--spinner-ring-opacity
|
Part label (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
spinner.label.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--spinner-label-color
|
spinner.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--spinner-label-typography-font-family--spinner-label-typography-font-size--spinner-label-typography-font-weight--spinner-label-typography-line-height--spinner-label-typography-letter-spacing
|
spinner.label.size
Box of the visually hidden label: one pixel, clipped, so the text stays in the accessibility tree.
|
dimension |
{space.1}
|
1px
|
--spinner-label-size
|