50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
|
type CircularProgressProps = {
|
||
|
|
className?: string
|
||
|
|
size: number
|
||
|
|
progress: number
|
||
|
|
trackWidth: number
|
||
|
|
indicatorWidth: number
|
||
|
|
}
|
||
|
|
|
||
|
|
const CircularProgress = ({
|
||
|
|
className,
|
||
|
|
indicatorWidth,
|
||
|
|
progress,
|
||
|
|
size,
|
||
|
|
trackWidth,
|
||
|
|
}: CircularProgressProps) => {
|
||
|
|
const center = size / 2,
|
||
|
|
radius =
|
||
|
|
center - (trackWidth > indicatorWidth ? trackWidth : indicatorWidth),
|
||
|
|
dashArray = 2 * Math.PI * radius,
|
||
|
|
dashOffset = dashArray * ((100 - progress) / 100)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
className={`relative ${className}`}
|
||
|
|
style={{ width: size, height: size }}
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="-rotate-90 fill-transparent stroke-th-fgd-4"
|
||
|
|
style={{ width: size, height: size }}
|
||
|
|
>
|
||
|
|
<circle cx={center} cy={center} r={radius} strokeWidth={trackWidth} />
|
||
|
|
<circle
|
||
|
|
className="fill-transparent stroke-th-active"
|
||
|
|
cx={center}
|
||
|
|
cy={center}
|
||
|
|
r={radius}
|
||
|
|
strokeDasharray={dashArray}
|
||
|
|
strokeDashoffset={dashOffset}
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeWidth={indicatorWidth}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CircularProgress
|