# Pull to refresh with drawn ring > **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 The deployments feed of "Orbital", an infrastructure console, with a custom pull-to-refresh. Pulling the list down (pointer drag from `scrollTop === 0`, or a mouse drag on desktop) moves the list with 55% of the finger's travel and reveals a 28px ring above it; the ring's arc is drawn in step with the pull and reaches a full circle at the 80px threshold. Release past the threshold and the list holds at 64px while the ring becomes a 75% arc spinning at 800ms per turn; after 1.2s a new row is inserted at the top, entering with an 8px drop and a mint highlight that fades out over 1.2s, and the list springs back to 0. A circular refresh button in the header triggers the same sequence for replay. ## Reference behaviour 1. Initial state: header "ORBITAL · EU-1 / Deployments" with a 40px round refresh button; nine deployment rows, the first with a pulsing live ring around its status dot. The ring indicator is invisible (opacity 0). 2. Press on the list at `scrollTop 0` and drag down: the list translates by `min(120, dy × .55)` px with no transition. The ring fades in over 160ms and its `stroke-dashoffset` goes from the full circumference (62.83) to 0 as pull goes 0 → 80px; it also scales from 0.6 to 1. 3. Drag back up above 0: the list returns to 0 and the ring hides. 4. Release under 80px: the list springs back to 0 over 420ms `cubic-bezier(.32,.72,0,1)`. 5. Release at or beyond 80px: the list snaps to 64px (same spring); the stage gets `loading`; the ring's arc jumps to `stroke-dashoffset 16` (about 75%) and rotates continuously, 800ms per revolution, linear. `aria-busy="true"` is set on the feed. 6. After 1200ms a new row ("checkout v3.2.0 · Deploying · 3 of 6 pods") is prepended. It animates in (`translateY(-8px)`, opacity 0 → 1, 360ms spring) and its background/border flash mint (`rgba(94,234,212,.18)` / `#5eead4`) holding for the first 25% then fading to the row surface by 1200ms. The list springs back to 0 and `aria-busy` returns to false. 7. Pulling again while loading does nothing. Each refresh cycles through three prepared rows so repeated pulls keep adding. 8. Tap the header refresh button: identical to step 5 onward. 9. The feed scrolls normally otherwise; a drag that starts with `scrollTop > 0` is a scroll, not a pull. ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54 status) │ │ 58 ORBITAL · EU-1 (⟳) │ header, 1px bottom hairline │ Deployments (24/600) │ │────────────────────────────────────────│ │ ◠ ring 28 (hidden, in │ .ptr, 64px tall, absolute │ a 64px band) │ │ 16 ┌──────────────────────────────┐ 16 │ row: r14, #1C1F25, 1px #2B3039 │ │ ● api-gateway v2.14.1 2m ago│ │ │ │ Healthy · 12 pods · p95 … 38s │ │ └──────────────────────────────┘ │ │ ┌──────────────────────────────┐ │ 8px gap │ │ ● billing v1.9.0 26m ago│ │ │ └──────────────────────────────┘ │ │ … │ │ │ │ while loading: list translated 64px, │ │ ring spinning in the revealed band │ └────────────────────────────────────────┘ ``` - `` flex column: `
` (flex none) then `.stage` (`flex:1; min-height:0; position:relative; overflow:hidden`). - `.ptr` (aria-hidden): absolute, `top:0; height:64px`, centred `` with a track circle and a progress circle, r=10. - `
`: `height:100%; overflow-y:auto; padding:0 16px 40px; overscroll-behavior:contain; touch-action:pan-y`; transformed by the pull. - `