Components · Feedback

Spinner

An indeterminate loading indicator — a 2px ring with a brand-colored arc. Three sizes (16 / 20 / 24). Use it for unknown-duration waits; use Progress for determinate ones.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

spinner

color: {colors.spinner-line}
trackColor: {colors.spinner-track}
borderWidth: 2px
sizeSm: 16px
sizeMd: 20px
sizeLg: 24px

Build with the skill

No package to install — hand this to your AI to generate the spinner in your stack.

Prompt for your AI

Implement the Zetta "Spinner" component in this project's stack using the zetta-design-md skill.

- Apply the `spinner` spec from the skill (variants: sm, md, lg).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

2px ring: spinner-track base with a spinner-line (brand) arc; sizes 16 / 20 / 24px.
Give it role="status" + an aria-label. Honor prefers-reduced-motion (slow the rotation).

Known gaps

Spinner-inside-button (async submit) is not yet specified as a button variant.