Progress Radial

Features

• A large hero dial for one primary metric plus three satellite mini rings
• Every ring is built at runtime via createElementNS (200-unit viewBox, no static SVG)
• Gradient arc stroke driven by a shared SVG <linearGradient> with rounded caps
• A halo of 56 hairline ticks around the hero arc that light up as progress passes them
• A tip dot punched into the arc head that travels with the current value
• A large centered percentage that counts up in sync with the arc sweep
• An uppercase accent label under the percentage, readable in both themes
• A −/+ stepper with a live "N of 2,400 assets" hint that recounts on every change
• All motion runs through one requestAnimationFrame ease-out driver (arc offset, tip, ticks, count)
• Live-updating role="progressbar" with aria-valuenow and aria-label synced on every change
• A soft accent bloom behind the dial that retones with the active design system
• Reduced-motion support that skips the sweep and paints final values instantly

Accessibility

ARIA role

The hero dial uses role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax

Labelling

The visual readout is aria-hidden; the value is exposed via a live aria-label ("Library sync N percent complete") updated on every step

Mini rings

Each satellite ring is its own labelled role="progressbar" ("Media 92 percent complete")

Stepper

Two <button type="button"> controls with explicit aria-labels, wrapped in a labelled role="group"

Disabled bounds

Buttons receive disabled (and a dimmed style) at 0% / 100%

Focus indicators

:focus-visible with --ring outline

Reduced motion

prefers-reduced-motion: reduce skips the sweep (JS paints final values) and freezes CSS transitions

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Progress Radial in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the progress is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.