Loading spinner

[pghqdev]

What to build

A CSS-only loading spinner — <span data-spinner> — that renders as a rotating circle in the accent color. No JS required. Respects prefers-reduced-motion: reduce by pausing the animation.

The spinner can stand alone (centered in its container) or sit inline (e.g., next to text in a button).

Acceptance criteria

• <span data-spinner> renders a rotating circle using --accent
• Spinner can be standalone (block, centered) or inline (next to text)
• Respects prefers-reduced-motion: reduce (animation paused)
• No JS dependency
• All styles in @layer hikari
• Kitchen-sink demo shows both standalone and inline usage
• rules/hikari-rules.md updated with markup example

Blocked by

None — can start immediately.