Progress Circle

Component 7

About

A circular progress indicator for showing task completion, uploads, or loading states, with determinate and indeterminate modes.

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

"use client";

import { ProgressCircle } from "@/components/ui/progress-circle";

export default function ProgressCircleDemo() {
  return (
    <div className="flex min-h-56 w-full items-center justify-center gap-12 bg-background p-8">
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle
          aria-label="Uploading…"
          value={75}
          className="size-12 text-primary"
        />
        <span className="text-sm text-muted-foreground">75%</span>
      </div>
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle
          aria-label="Loading…"
          isIndeterminate
          className="size-12 text-primary"
        />
        <span className="text-sm text-muted-foreground">Loading</span>
      </div>
    </div>
  );
}