The 9.01-second source contains 538 frames at 60fps. The three values do not move toward completion together: each advances, reverses, and pauses on its own timeline.
01 / Setup
Installation
Copy the stylesheet and keep the fill, SVG frontier, copy, and value layers in that order.
<link rel="stylesheet" href="/progress-pills.css" />02 / Anatomy
One value drives three layers
--pill-progressmoves the colored field and the SVG frontier using transforms.--pill-countupdates the tabular percentage through a CSS counter.- Each frontier uses a different SVG profile and a small vertical breathing cycle.
03 / Frame analysis
Observed motion system
Full-sequence samples were taken every 333ms, with 60fps inspection around direction changes.
Model, agent, and visual values reverse at different moments.
Number, fill boundary, and bright edge remain spatially locked.
The edge profile subtly stretches while its center continues travelling.
Progress decelerates, pauses briefly, and accelerates into reverse.
04 / Contract
CSS API
| Token / selector | Default | Purpose |
|---|---|---|
--progress-pill-width | 22rem—35rem | Scales the stack, type, frontier, and gaps. |
--pill-progress | 50% | Typed percentage used by both moving layers. |
--pill-count | 50 | Typed integer rendered by the CSS counter. |
--pill-accent | Per task | Bright frontier and active field color. |
05 / Behavior
Accessibility
Each capsule exposes indeterminate progress semantics while its visual value changes continuously. Reduced-motion users receive the same three states with both timelines paused.