Progress Gauge

Create a half-circle progress gauge. An SVG semicircular arc (9px stroke, round caps) over a hairline track, with 5 small tick marks at 0/25/50/75/100 just inside the arc. On mount, a single animated value drives everything in sync over 1.7s with easing cubic-bezier(0.22, 1, 0.36, 1) after a 0.3s delay: the accent arc fills (strokeDasharray = half circumference, animate strokeDashoffset), the needle (3px ink line with a 5px hub circle, transform-origin at the hub) rotates from -90deg to -90 + value/100 * 180 degrees, and a large number below counts up, with a "/ 100" suffix in the accent color and a monospace caption underneath. Driving arc, needle and number from one animated value keeps them perfectly synchronized. Accessibility: the wrapper uses role="meter" with aria-valuenow/min/max and a label like "Performance score". If prefers-reduced-motion is set, render the final state immediately. Trigger the sweep when the gauge enters the viewport. 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.