Circular Progress

circle x stroke

SVG circular progress indicator with animated stroke. From Magic UI.

progresscirclesvgmagicui

Code

progress-circle.tsx

export function CircularProgress({ value = 65 }: { value?: number }) {
  const r = 40;
  const circumference = 2 * Math.PI * r;
  const offset = circumference * (1 - Math.min(100, Math.max(0, value)) / 100);
  return (
    <svg width="100" height="100" className="-rotate-90">
      <circle cx="50" cy="50" r={r} fill="none" stroke="currentColor" strokeWidth="6" className="text-muted/20" />
      <circle cx="50" cy="50" r={r} fill="none" stroke="var(--accent, #8b5cf6)" strokeWidth="6" strokeLinecap="round"
        strokeDasharray={circumference} strokeDashoffset={offset} className="transition-all duration-1500 ease-out" />
    </svg>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Circular Progress component and wire it to my accent.”