# Download button with progress and retry > **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 release download card for "pocketknife", a fictional command-line task runner, on a near-black grid page. The hero is a 60px acid-lime button, "Download for macOS · arm64 · 18.4 MB". Clicking it turns the same 60px row into a progress bar with a moving stripe. The bar reads "Downloading 41%" on the left and "7.5 / 18.4 MB · 3.3 MB/s · 4s left" on the right. Pause and cancel squares grow out of the right edge. Done fills the bar solid, draws a check and names the file. A dropped connection turns the bar coral and keeps the bytes, and the pause square becomes Retry, which resumes from where it stopped. Below, three asset rows use a 40px progress ring as their button: download, pause, resume, retry, done. The detail worth copying is the label that **inverts where the fill passes**. The text is drawn twice, light on the track and dark inside the fill, and the fill's `clip-path` reveals the dark copy. Every character stays readable at every percent. ## Reference behaviour 1. First frame: a 680px panel. Header: 36px lime mark, "pocketknife" (24px/700), "v3.2.0" in mono, and a "latest" outline tag. Lede: "A pocket-sized task runner for monorepos. Released 2 Oct 2026." 2. The hero button is idle: lime fill, a download glyph, "Download for macOS", and "arm64 · 18.4 MB" right-aligned in mono at 75 % opacity. Below it, on the left, "sha256 7c1e4f…09a3b2" in mono. On the right, a switch "Simulate a dropped connection" (off). 3. "Other assets": linux-x64.tar.gz (17.9 MB) is **already downloading** from 38 % at about 2.2 MB/s, so the page is alive on load. windows-x64.zip (19.2 MB) is idle. checksums.txt (1.2 KB) is done, with a lime disc and a check. 4. Click the hero: the button fades (160ms) and scales X to .97. The bar fades in under it. The pause and cancel squares grow from width 0 to 60px with an 8px left margin (280ms). Focus moves to Pause. 5. While running, the fill width is the true fraction. The stripes (−45°, 8px dark at 9 % / 8px clear) slide continuously, 700ms per tile. The left label is "Downloading N%". The right label is "got / total MB · speed MB/s · Ns left". Speed wanders between 70 % and 130 % of 3.4 MB/s and is smoothed, so the number breathes rather than flickers. 6. **Pause:** the stripes stop, the fill dims to `#a9c447`, the label reads "Paused at N%" and "got / 18.4 MB", and the square shows a play glyph labelled "Resume download". Resume continues from the same byte. 7. **Cancel:** returns to the idle button at 0 and focuses it. The live region says "Download cancelled." 8. **Done** (18.4 of 18.4): the fill becomes solid lime with no stripes. A check draws (360ms after 120ms) before "Downloaded", with the file name "pocketknife-3.2.0-macos-arm64.pkg" on the right. The squares collapse to 0. Under the bar, the checksum is replaced by a lime "Download again" text button, which takes focus. 9. **Error:** with the switch on, the next download stops at exactly 47 %. The track turns `rgba(255,106,77,.14)` with a coral ring, and the fill turns coral with no stripes. The label reads "(!) Connection dropped" and "8.6 / 18.4 MB kept". The pause square becomes a coral Retry glyph and takes focus. Retry resumes from 8.6 MB. Each run fails at most once. 10. **Ring rows:** click idle to start (the ring arc draws, the meta shows "got / total MB · speed MB/s", the centre shows pause). Click to pause (the arc dims, "Paused · got / total MB", play glyph). Click to resume. windows-x64.zip fails once at 62 % (the arc goes coral, the meta reads "Mirror reset at 62% · tap to retry", retry glyph). Done: a lime disc scales in from 0 behind a drawn dark check, the meta reads "17.9 MB · verified", and the button becomes `aria-disabled`. 11. One `requestAnimationFrame` loop drives every running job and stops itself when nothing is running. ## Structure ``` 1280 × 800, panel 680px centred, 48px grid page with radial vignette ┌ panel ─────────────────────────────────────────────────────────┐ padding 28 │ [■] pocketknife v3.2.0 (latest) │ │ A pocket-sized task runner for monorepos. Released 2 Oct 2026. │ │ ┌ main (flex 1) ─────────────────────────────┐ ┌60┐ ┌60┐ │ 60px │ │▓▓▓▓▓▓▓ Downloading 41% ░ 7.5 / 18.4 MB · …│ │ ‖│ │ ×│ │ │ └────────────────────────────────────────────┘ └──┘ └──┘ │ │ sha256 7c1e4f…09a3b2 (o) Simulate a dropped conn. │ │ OTHER ASSETS │ │ [▤] pocketknife-3.2.0-linux-x64.tar.gz ( ring 40 ) │ 12px rows │ 15.0 MB / 17.9 MB · 2.2 MB/s │ │ [▤] pocketknife-3.2.0-windows-x64.zip ( ring ) │ │ [▤] checksums.txt 1.2 KB · verified ( disc + check ) │ └────────────────────────────────────────────────────────────────┘ ``` - `.dl` is a 60px flex row: `.main` (flex 1, `position: relative`) holds `button.go` and `div.bar[role=progressbar]`, both `inset: 0`. Then `button#pause.ctl` and `button#cancel.ctl`. - `.bar` contains `.txt` (light label) and `.fill` (lime, clipped). `.fill` contains a second `.txt` with the same spans in dark ink. JS writes both copies. - `.under` is the checksum or "Download again", plus the switch (`