About
A small ring-shaped loading indicator that shows determinate progress toward a value or spins continuously while a process is indeterminate.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Circular Progress to your project and fits it to your theme.
Code
How Circular Progress is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { CircularProgress } from "@/components/ui/circular-progress";
export default function CircularProgressDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-8 p-8">
<CircularProgress aria-label="Progress, empty" value={0} />
<CircularProgress aria-label="Progress, low" value={0.05} />
<CircularProgress aria-label="Progress, mid" value={0.45} />
<CircularProgress aria-label="Progress, high" value={0.98} />
<CircularProgress aria-label="Progress, complete" value={1} />
<CircularProgress
aria-label="Progress, custom max"
value={150}
max={200}
/>
</div>
);
}
More by language-lit
View all
Material 3 Switch
Material Text Field
Material 3 Checkbox