# Ring Stepper

> A token-driven circular progress stepper — a large two-color gradient ring fills across four setup stages via stroke-dashoffset with rounded caps and a traveling tip, a centered step readout, a labeled node track with pending / active / complete states, and Back / Continue navigation.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Tensor
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, wizard, progress
- Page: https://builder.atheros.ai/components/ring-stepper
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_ring_stepper/preview-e00da28380f0.webp

## Features

- Large circular SVG ring whose gradient fill sweeps clockwise via `stroke-dashoffset` as the active stage advances, with rounded caps and a traveling tip dot
- Two-color brand gradient painted on the ring fill and the node connector (pink→blue in light, violet→teal in dark)
- Centered readout inside the ring — a `Step` eyebrow, a large `N / 4` count, and the current stage label
- A short stage description updates beneath the ring on every step
- Labeled node track: each stage is a node with pending (number), active (stage icon + pulse ring), and complete (gradient fill + check) states, joined by a connector whose fill grows with progress
- Satisfying micro-animations — a check pops in on completion, the active node radiates a soft pulse
- Back / Continue navigation with an ink-on-accent primary button; Back disables on the first step and Continue reads `Finish` on the last
- Clickable nodes jump straight to any stage; Arrow Left/Right move through the wizard
- Visually-hidden live region announces "Step X of N" to assistive technology
- The ring exposes `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`/`aria-valuetext`; `aria-current="step"` tracks the active node
- Retones across design systems in light and dark; fully respects `prefers-reduced-motion`

## Accessibility

- **Progress semantics** — The ring is `role="progressbar"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/`aria-valuetext`
- **Current step** — `aria-current="step"` set on the active node
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces "Step X of N"
- **Clickable nodes** — Each node is a native `<button>` with an explicit `aria-label`
- **Keyboard navigation** — Arrow Left/Right move between steps; Back/Continue are native buttons
- **Contrast** — Count, labels, description, step names, and button labels clear WCAG AA (≥4.5); the ring arc clears ≥3:1 against its track in both themes
- **Focus indicators** — `:focus-visible` with `--ring` outline on nodes and buttons
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Advance to the next step
- `ArrowLeft` — Return to the previous step
- `Enter` — Activate the focused node or button
- `Space` — Activate the focused node or button
- `Tab` — Move focus between nodes and buttons

## Common questions

**Which frameworks is Ring Stepper available in?**

Ring Stepper 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 the Ring Stepper navigation component free?**

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

**Does Ring Stepper support dark mode?**

Yes. Ring Stepper ships light and dark themes, both drawn from the Tensor design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Ring Stepper 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/ring-stepper

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