Progress Ring

An SVG circular progress indicator with animated stroke offset and an accessible progressbar role.

progressringsvgstats

68%

92%

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { ProgressRing } from "@/registry/components/progress-ring";

export function Example() {
  return <ProgressRing />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Charts

Counter Stat

A stat card whose number counts up the first time it scrolls into view, using easeOutExpo so the final digits do not crawl. Respects prefers-reduced-motion.