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
import * as React from "react";
import { CircleProgress } from "@/components/ui/circle-progress";
export function AnimationDemo() {
const [autoProgress, setAutoProgress] = React.useState(0);
const [progress, setProgress] = React.useState(50);
React.useEffect(() => {
const timer = setInterval(() => {
setAutoProgress((prev) => (prev >= 100 ? 0 : prev + 1));
}, 100);
return () => clearInterval(timer);
}, []);
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="flex flex-col items-center">
<h3 className="text-base font-medium mb-4">Auto Animation</h3>
<CircleProgress
value={autoProgress}
maxValue={100}
size={100}
animationDuration={300}
/>
<span className="mt-2 text-sm">{Math.round(autoProgress)}%</span>
</div>
<div className="flex flex-col items-center">
<h3 className="text-base font-medium mb-4">Interactive</h3>
<CircleProgress
value={progress}
maxValue={100}
size={100}
animationDuration={500}
/>
<div className="w-full max-w-xs mt-4 space-y-2">
<input
type="range"
min="0"
max="100"
value={progress}
onChange={(e) => setProgress(parseInt(e.target.value))}
className="w-full"
/>
<div className="text-center text-sm">Value: {progress}</div>
</div>
</div>
</div>
);
}
