Progress Circle
A circular progress indicator component for visualizing completion percentage.
0%
The ProgressCircle component displays a circular progress indicator, commonly used to show file upload progress. It visually represents a percentage value (0-100) with a ring and a centered text label.
If you are installing the other dropzone components via the CLI, this component will be installed automatically. You can skip the following steps.
Installation
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 and strokeWidth.
import { ProgressCircle } from '@/components/ui/progress-circle';
function ProgressDemo() {
const progress = 75;
return (
<div className="flex items-center space-x-4 p-4 bg-gray-800 rounded-lg">
{/* Default size */}
<ProgressCircle progress={progress} />
{/* Larger size with thicker stroke */}
<ProgressCircle progress={progress} size={64} strokeWidth={6} />
{/* Smaller size */}
<ProgressCircle progress={progress} size={32} strokeWidth={3} />
</div>
);
}