# Orbit dots loader family > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A specimen page for a product's ("Mira") loading indicators: three indicators in three cards, all in one electric blue on white, each built from at most three DOM elements (pseudo-elements do the rest) and animated with CSS only. **Orbit dots** — three dots at 0°, 120°, 240° at decreasing opacity, spinning linearly. **Staggered bars** — three vertical bars scaling in height with negative animation delays so the wave is already in motion on first paint. **Morphing ring** — a thick ring whose radius morphs between a circle and a rounded square while rotating at half speed, with a faint core pulsing inside. Two sliders (duration 600–2400ms, size 32–96px) write `--dur` and `--size` on `:root`; nothing else changes, which is the point: the loaders are parametric. ## Reference behaviour 1. Initial state: header with title and a mono badge reading `--dur: 1200ms · --size: 64px`; three cards, each with a centred loader on a soft radial white stage, a name, a mono description and an element-count chip; a footer bar with the two sliders, a Pause button and a one-line code hint. All three loaders are already mid-cycle (negative delays), so there is no "start-up" frame. 2. Drag Duration: every loader's cycle time changes immediately (the ring's spin is always 2 × duration); the output reads e.g. "900 ms" and the badge updates. 3. Drag Size: loaders scale from 32px to 96px; dot size, bar width and ring thickness scale proportionally because they are all expressed as fractions of `--size`. 4. Click Pause: `aria-pressed` becomes true, the button inverts (ink fill) and reads "Resume"; all animations freeze in place via `animation-play-state: paused`. Click again to resume from the same frame. 5. Hover a card: border darkens from `--line` to `--line-2`. Hover a slider thumb: it scales 1.15. 6. Keyboard: Tab reaches the two sliders (arrow keys step 100ms / 4px) and the Pause button (Space toggles). 7. Under `prefers-reduced-motion: reduce`, all three loaders stop moving and instead fade between 45 % and 100 % opacity over 2.4s. ## Structure ``` 1280 × 800 ┌─────────────────────────────────────────────────────────────────────────┐ │ 56 Mira loaders --dur: 1200ms · --size │ header │ Three indicators, one accent… │ │ ┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ · ● │ │ ▌▐▌ │ │ ◯ │ │ stage (flex 1) │ │ · │ │ │ │ │ │ │ │────────────────────│ │────────────────────│ │────────────────────│ │ hairline │ │ Orbit dots 2 elem │ │ Staggered 1 elem │ │ Morphing 1 elem │ │ info │ │ 1 div + 1 span… │ │ 1 div · ease-in-out│ │ 1 div · radius… │ │ │ └────────────────────┘ └────────────────────┘ └────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────────┤ │ Duration ──●────── 1200 ms Size ────●──── 64 px [❚❚ Pause] .orbit… │ footer └─────────────────────────────────────────────────────────────────────────┘ cards: 3 equal columns, 20px gap, 24px 56px section padding; card radius 14px ``` - ``: `grid-template-rows: auto 1fr auto`. - `
`: `

` + `

`, `.badge` at right. - `

`: three `
`, each `.stage` (`display: grid; place-items: center`) + `.info` (`

`, `

`, `.n` chip). - Loaders: `

`; `
`; `
`. - `