Tailwind CSS Radial Progress Bar

RadialProgressBar.tsx

/* This is a react-based fork of tailwind-radial-progress-bar.
* The size is the size of the containing div, given as a tailwind dimension value
* The radius is provided as a prop, and circumference is calculated based on it.
* The strokeDashOffset is dynamically calculated from the circumference.
* The progress is a number as a percentage, such as 50, for 50%.
*/

export const RadialProgressBar = ({size, radius, progress}: { size: number, radius: number, progress: number }) => {
    const width = `w-${size}`
    const height = `h-${size}`
    const circumference = Number((2 * Math.PI * radius).toFixed(1))
    const strokeDashOffset = (circumference - (circumference * progress) / 100)

    return (
        <div className={`relative ${width} ${height}`}>
            <svg className="w-full h-full" viewBox="0 0 100 100">
                <circle
                    className="text-gray-200 stroke-current"
                    strokeWidth="10"
                    cx="50"
                    cy="50"
                    r={radius}
                    fill="transparent"
                />

                <circle
                    className="text-indigo-500  progress-ring__circle stroke-current"
                    strokeWidth="10"
                    strokeLinecap="round"
                    cx="50"
                    cy="50"
                    r={radius}
                    fill="transparent"
                    strokeDasharray={circumference}
                    strokeDashoffset={`${strokeDashOffset}px`}/>

                <text
                    x="50"
                    y="50"
                    fontSize="12"
                    textAnchor="middle"
                    alignmentBaseline="middle">{progress}%
                </text>
            </svg>
        </div>
    )
}