Donut Progress

Create a donut progress ring with a synced count-up. An SVG circle (radius 44 in a 110 viewBox, 10px stroke, round linecap) rotated -90deg so it starts at 12 o'clock, over a full hairline-colored track ring. The accent arc sweeps from 0% to the target value (e.g. 72%) using strokeDasharray = circumference and animating strokeDashoffset = circumference * (1 - value / 100), over 1.8s with easing cubic-bezier(0.22, 1, 0.36, 1) after a 0.3s delay. Drive the arc and the number from the same animated value so they can never drift apart: in the center, a large bold percentage counts up in sync (the % sign smaller, in the accent color), with a small monospace label underneath. Accessibility: the wrapper uses role="meter" with aria-valuenow/min/max and an aria-label. If prefers-reduced-motion is set, show the final value and arc immediately. Trigger the sweep when the ring scrolls into view. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.