Donut Progress Ring
DataOne KPI as an arc sweeping from twelve o'clock, with a centre figure that lands its last digit on the frame the arc completes
This is the format it was composed for. Switch above to see it lay itself out for another — same animation, re-arranged for the frame.
For developers — source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A square KPI card built around a donut gauge: a thin track ring in the hairline colour with a small graticule outside it, an accent arc sweeping clockwise from twelve o'clock with round caps, and the percentage counting up in the middle in the display face with tabular figures and a quiet mono caption underneath. The count has to finish on the exact frame the arc stops — that synchronisation is the whole point. Put a notch on the ring for the target that lights up when the arc passes it, and frame the card with a small label top left and a footnote bottom left.
