Progress Circle

Component

About

A circular progress indicator built on React Aria Components that shows determinate percentage or an indeterminate spinning animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress Circle to your project and fits it to your theme.

Code

How Progress Circle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ProgressCircle from "@/components/ui/css-progresscircle";

export default function ProgressCircleDemo() {
  return (
    <div className="flex w-full h-full items-center justify-center gap-10">
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle value={60} size={48} aria-label="Loading…" />
        <span className="text-sm text-muted-foreground">Determinate</span>
      </div>
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle isIndeterminate size={48} aria-label="Loading…" />
        <span className="text-sm text-muted-foreground">Indeterminate</span>
      </div>
    </div>
  );
}