Components

Spinner

An open arc that turns while something loads and reports the state to screen readers.

States

Spinner has one state: turning. Under reduced motion the arc stops.

State	Visual change	Tokens
Turning	The arc turns continuously	`period-spinner`
Reduced motion	The arc stops	None

Size	Value	Token
`xs`	12 px	`icon-size-xs`
`sm`	16 px	`icon-size-sm`
`md`	20 px	`icon-size-md`
`lg`	24 px	`icon-size-lg`
Shape	An open arc of about 300° with round caps, no track	None
Stroke width	1/12 of the size	None

Values are shown for the selected brand; change the brand from the top bar.

Token	Light mode	Dark mode
`--bigbang-icon-size-xs`	`12px12px12px`	`12px12px12px`
`--bigbang-icon-size-sm`	`16px16px16px`	`16px16px16px`
`--bigbang-icon-size-md`	`20px20px20px`	`20px20px20px`
`--bigbang-icon-size-lg`	`24px24px24px`	`24px24px24px`
`--bigbang-color-text-subtle`	`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-action-primary-default`	`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-period-spinner`	`1s1s1s`	`1s1s1s`

Interaction	Property	Duration token	Easing token	Reduced motion
Turning	A `rotate` loop (`animate-spin`)	`period-spinner` (1000 ms)	Linear	The turn stops (`reduce-motion:animate-none`).

Loops are used only in loading indicators. See Motion for the values.