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>
    )
}

this worked for me
`// components/CircularProgressBar.tsx
import React from 'react';

interface CircularProgressBarProps {
percentage: number;
size?: number;
strokeWidth?: number;
}

const CircularProgressBar: React.FC = ({
percentage,
size = 120,
strokeWidth = 10,
}) => {
const radius = (size - strokeWidth) / 2;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (percentage / 100) * circumference;

return (
<svg
width={size}
height={size}
viewBox={0 0 ${size} ${size}}
className="circular-progress-bar"
>
<circle
className="circle-bg"
stroke="#e6e6e6"
strokeWidth={strokeWidth}
fill="none"
cx={size / 2}
cy={size / 2}
r={radius}
/>
<circle
className="circle-progress"
stroke="#3b82f6"
strokeWidth={strokeWidth}
strokeLinecap="round"
fill="none"
cx={size / 2}
cy={size / 2}
r={radius}
strokeDasharray={circumference}
strokeDashoffset={offset}
transform={rotate(-90 ${size / 2} ${size / 2})} // Rotate the circle to start at the top
/>

{${percentage}%}


);
};

export default CircularProgressBar;
`

Great work!
I made some improvements / set some defaults over here, take a look if you'd like :)