Progress Circle
A circular progress indicator component for visualizing completion percentage.
0%
The ProgressCircle component displays a circular progress indicator. It draws with currentColor, so set its color with a text class.
If you are installing the other upload components via the CLI, this component will be installed automatically. You can skip the following steps.
Installation
Use the shadcn CLI to add the component to your project.
npx shadcn@latest add https://edgestore.dev/r/progress-circle.jsonUsage
Import the component and provide the progress prop. You can optionally customize the size, strokeWidth and whether the percentage is shown.
import { ProgressCircle } from '@/components/upload/progress-circle';
function ProgressDemo() {
return (
<div className="flex items-center gap-4 rounded-lg bg-black/80 p-4 text-white">
{/* Default size */}
<ProgressCircle progress={75} />
{/* Larger size with thicker stroke */}
<ProgressCircle progress={75} size={64} strokeWidth={6} />
{/* Smaller size without the percentage */}
<ProgressCircle progress={75} size={24} strokeWidth={3} showValue={false} />
</div>
);
}