CircleProgress displays progress, completion status, or usage metrics in a circular format. It provides visual feedback about processes, tasks completion, or resource utilization. ## When to use - To show completion percentage of a task or process - To display resource usage (disk space, memory, CPU) - To create countdown or elapsed time indicators - For data visualization that needs to show parts of a whole ## Accessibility - Progress indicator includes ARIA attributes for screen readers - Value text provides detailed information about current progress value - Ensure sufficient color contrast for the progress indicator - Consider providing text alternatives that describe the progress value
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Circle Progress to your project and fits it to your theme.
Code
How Circle Progress is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import * as React from "react";
import { CircleProgress } from "@/components/ui/circle-progress";
// Basic progress demo showing different values
export function BasicProgress() {
return (
<div className="flex flex-wrap gap-8 justify-center">
{[0, 25, 50, 75, 100].map((value) => (
<div key={value} className="flex flex-col items-center">
<CircleProgress value={value} maxValue={100} size={80} />
<span className="mt-2 text-sm">{value}%</span>
</div>
))}
</div>
);
}
// Size and stroke width variations
export function SizeVariants() {
return (
<div className="flex flex-wrap gap-8 justify-center items-end">
{[
{ size: 40, stroke: 2, label: "Small" },
{ size: 80, stroke: 4, label: "Medium" },
{ size: 120, stroke: 6, label: "Large" },
{ size: 160, stroke: 10, label: "X-Large" }
].map((config) => (
<div key={config.size} className="flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={config.size}
strokeWidth={config.stroke}
/>
<span className="mt-2 text-sm">{config.label}</span>
</div>
))}
</div>
);
}
// Color customization demo
export function ColorVariants() {
return (
<div className="flex flex-wrap gap-8 justify-center">
<div className="flex flex-col items-center">
<CircleProgress value={30} maxValue={100} size={80} />
<span className="mt-2 text-sm">Default (30%)</span>
</div>
<div className="flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={80}
getColor={() => "stroke-blue-500"}
/>
<span className="mt-2 text-sm">Blue (custom)</span>
</div>
<div className="flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={80}
getColor={() => "stroke-purple-500"}
/>
<span className="mt-2 text-sm">Purple (custom)</span>
</div>
<div className="flex flex-col items-center">
<CircleProgress value={95} maxValue={100} size={80} />
<span className="mt-2 text-sm">Default (95%)</span>
</div>
</div>
);
}
// Special configurations demo
export function SpecialConfigs() {
return (
<div className="flex flex-wrap gap-8 justify-center">
<div className="flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={80}
counterClockwise={true}
/>
<span className="mt-2 text-sm">Counter-clockwise</span>
</div>
<div className="flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={80}
disableAnimation={true}
/>
<span className="mt-2 text-sm">No animation</span>
</div>
<div className="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<CircleProgress
value={65}
maxValue={100}
size={80}
className="dark"
/>
<span className="mt-2 text-sm text-white">Dark mode</span>
</div>
</div>
);
}More by oc tung
View all
useItemOverflow
68