# Progress Radial

> A premium radial progress dial — a runtime-built SVG gradient arc inside a halo of lit ticks, with a travelling tip dot, an animated count-up percentage, quiet −/+ stepper controls and three satellite mini rings, fully token-driven and design-system agnostic.

- Category: Progress
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: radial
- Page: https://builder.atheros.ai/components/progress-radial
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_progress_radial/preview-3f9a775b4039.webp

## 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-label`s, 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

## Keyboard shortcuts

- `Enter` — Step the value when a stepper button is focused
- `Space` — Step the value when a stepper button is focused

## Common questions

**Which frameworks is Progress Radial available in?**

Progress Radial ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Progress Radial free?**

Progress Radial is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Progress Radial support dark mode?**

Yes. Progress Radial ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Progress Radial live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/progress-radial

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt