Spaces:
Sleeping
Sleeping
File size: 1,631 Bytes
149698e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | interface CircularProgressProps {
percentage: number;
label: string;
}
export default function CircularProgress({ percentage, label }: CircularProgressProps) {
return (
<div className="relative mb-8">
{/* Outer ring pulse */}
<div className="absolute inset-0 rounded-full border-4 border-primary opacity-20 animate-pulse-ring" />
{/* SVG circular progress */}
<div className="relative h-48 w-48">
<svg className="h-full w-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
{/* Background circle */}
<path
className="text-slate-100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
/>
{/* Progress arc */}
<path
className="text-primary drop-shadow-md transition-all duration-700 ease-out"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="currentColor"
strokeDasharray={`${percentage}, 100`}
strokeLinecap="round"
strokeWidth="2.5"
/>
</svg>
{/* Center text */}
<div className="absolute inset-0 flex flex-col items-center justify-center">
<span className="text-4xl font-bold text-slate-900">{percentage}%</span>
<span className="mt-1 text-xs font-medium uppercase tracking-wider text-slate-400">
{label}
</span>
</div>
</div>
</div>
);
}
|