Components
Loading preview...
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
npx shadcn@latest add https://21st.dev/r/sean0205/progress'use client';
import { useEffect, useState } from 'react';
import { ProgressRadial } from '@/components/ui/progress';
export default function ProgressRadialDemo() {
const [taskProgress, setTaskProgress] = useState(0);
useEffect(() => {
// Task completion simulation
const taskTimer = setInterval(() => {
setTaskProgress((prev) => {
if (prev >= 100) {
return 0; // Reset for continuous loop
}
return prev + Math.random() * 2 + 0.5; // Random increment 0.5-2.5
});
}, 200);
return () => {
clearInterval(taskTimer);
};
}, []);
return (
<div className="flex flex-col items-center gap-3">
<ProgressRadial
value={taskProgress}
size={80}
startAngle={-90}
endAngle={180}
strokeWidth={5}
indicatorClassName="text-green-500"
className="text-green-500"
>
<div className="text-center">
<div className="text-base font-bold">{Math.round(taskProgress)}%</div>
<div className="text-xs text-muted-foreground">Upload</div>
</div>
</ProgressRadial>
<span className="text-xs text-muted-foreground">Upload Status</span>
</div>
);
}