## Spin
A brand-coloured spinner for an indeterminate wait — loading a page, a panel, or results.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-spin> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, audience.
Props:
- size: small | default | large, default default. Spinner diameter
- tip: string, default —. Optional caption shown under the ring
- spinning: boolean, default false. Wrapper mode only (with slotted children): show/hide the overlay scrim + centred ring. Toggling it flips a class on a persistent node — the child subtree is never rebuilt.
Tokens: color-primary, purple-20, text-secondary.
Use when: Spin (an indeterminate wait with no measurable percentage); Progress (you can measure completion (a percentage)); Skeleton (you want to hold the shape of the content that is loading).