({
value = 80,
size = 70,
strokeWidth = 7,
fontSize = 14,
})
| 9 | } |
| 10 | |
| 11 | const CircularProgress: React.FC<CircularProgressProps> = ({ |
| 12 | value = 80, |
| 13 | size = 70, |
| 14 | strokeWidth = 7, |
| 15 | fontSize = 14, |
| 16 | }) => { |
| 17 | const center = size / 2 |
| 18 | const radius = center - strokeWidth / 2 |
| 19 | const circumference = 2 * Math.PI * radius |
| 20 | const strokeDashoffset = circumference - (value / 100) * circumference |
| 21 | |
| 22 | return ( |
| 23 | <motion.svg |
| 24 | width={size} |
| 25 | height={size} |
| 26 | className="transform" |
| 27 | initial={{ opacity: 0 }} |
| 28 | animate={{ opacity: 1 }} |
| 29 | transition={{ duration: 0.4, ease: 'easeOut' }} |
| 30 | > |
| 31 | <circle |
| 32 | className="text-gray-200 opacity-25" |
| 33 | strokeWidth={strokeWidth} |
| 34 | stroke="currentColor" |
| 35 | fill="transparent" |
| 36 | r={radius} |
| 37 | cx={center} |
| 38 | cy={center} |
| 39 | />{' '} |
| 40 | <circle |
| 41 | className="text-red-300 opacity-50" |
| 42 | strokeWidth={strokeWidth / 2} |
| 43 | stroke="currentColor" |
| 44 | fill="transparent" |
| 45 | r={radius} |
| 46 | cx={center} |
| 47 | cy={center} |
| 48 | /> |
| 49 | <motion.circle |
| 50 | className="text-red-500" |
| 51 | strokeWidth={strokeWidth} |
| 52 | strokeDasharray={circumference} |
| 53 | strokeDashoffset={circumference} |
| 54 | strokeLinecap="round" |
| 55 | stroke="currentColor" |
| 56 | fill="transparent" |
| 57 | r={radius} |
| 58 | cx={center} |
| 59 | cy={center} |
| 60 | transform={`rotate(-90 ${center} ${center})`} |
| 61 | initial={{ strokeDashoffset: circumference }} |
| 62 | animate={{ strokeDashoffset }} |
| 63 | transition={{ duration: 1.5, ease: 'easeInOut' }} |
| 64 | /> |
| 65 | <text |
| 66 | x={center} |
| 67 | y={center} |
| 68 | textAnchor="middle" |
nothing calls this directly
no outgoing calls
no test coverage detected