Components

Spinner

Indeterminate loading ring; .ct-icon-spin turns a glyph once (refresh).

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

.ct-spinner

.ct-icon-spin

Code

<span class="ct-spinner" role="status" aria-label="Loading"></span>
<button class="ct-icon-button" aria-label="Refresh"><svg class="ct-icon-spin" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-refresh"></use></svg></button>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom property	Value	Alias
`--ct-spinner-color`	`var(--accent)`	`{colors.accent}`
`--ct-spinner-duration`	`var(--motion-spin-duration)`	`{motion.spinDuration}`
`--ct-spinner-size`	`20px`
`--ct-spinner-stroke-width`	`var(--size-focus-ring-width)`	`{size.focusRingWidth}`
`--ct-spinner-track`	`var(--line)`	`{colors.line}`

Usage

Do

Use the spinner while a request is in flight and nothing else can show progress.
Use .ct-icon-spin to turn a refresh glyph once on press.

Don't

Don't show a spinner for under 300 ms; it flickers.

Accessibility

Pair the spinner with a status message (role="status") or an aria-label.
Under Reduce Motion the spin stops.