Ring Stepper

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

Customise it with AI

Open Ring Stepper in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation 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.