You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
968 B
39 lines
968 B
interface Props { |
|
className?: string; |
|
radius?: number; |
|
percentage: number; |
|
backingRingClassname?: string; |
|
} |
|
|
|
export function ProgressRing(props: Props) { |
|
const radius = props.radius ?? 40; |
|
|
|
return ( |
|
<svg |
|
className={`${props.className ?? ""} -rotate-90`} |
|
viewBox="0 0 100 100" |
|
> |
|
<circle |
|
className={`fill-transparent stroke-denim-700 stroke-[15] opacity-25 ${ |
|
props.backingRingClassname ?? "" |
|
}`} |
|
r={radius} |
|
cx="50" |
|
cy="50" |
|
/> |
|
<circle |
|
className="fill-transparent stroke-current stroke-[15] transition-[stroke-dashoffset] duration-150" |
|
r={radius} |
|
cx="50" |
|
cy="50" |
|
style={{ |
|
strokeDasharray: `${2 * Math.PI * radius} ${2 * Math.PI * radius}`, |
|
strokeDashoffset: `${ |
|
2 * Math.PI * radius - |
|
(props.percentage / 100) * (2 * Math.PI * radius) |
|
}`, |
|
}} |
|
/> |
|
</svg> |
|
); |
|
}
|
|
|