# Loader
> Generated from aha-loader.contract.json — do not edit by hand.

The full-surface branded loading screen shown while a new environment boots — workspace → editor, or editor → presenting.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | string | `Loading` | Accessible name announced by the role=status live region (e.g. "Opening the editor…") |

## Visual standard (measured)
- Ground: white full-surface (--aha-white); fills its container, min-height 240px
- Tiles: five 120×120 rounded tiles (radius-xl 16), each centred, one prominent at a time
- Art: reused <aha-illustration> spot art at 96px — loader-award · loader-wand · loader-plane · loader-ballot · loader-chart
- Motion: soft-flow keyframe · 7.5s loop · 1.5s stagger across the five · easing --aha-ease-in-out
- Reduced motion: prefers-reduced-motion stills the loop and holds one branded tile
- Duration: override the loop length via the CSS custom property --aha-loader-duration (default 7.5s)

## When to use
- **Loader** — a full-screen environment transition — the user lands in a new surface (workspace → editor, editor → presenting) and waits for it to boot
- **Spin** — an inline, indeterminate wait inside an existing surface — a button, a panel, a section loading in place
- **Skeleton** — the layout of the content being loaded is known — show its shape rather than a spinner

One Loader per transition, filling the whole surface. It is decorative brand motion, not a progress bar — don't pair it with a percentage. Keep the `label` a short present-tense phrase naming the destination ("Opening the editor…").