Skip to content

Instantly share code, notes, and snippets.

@maxotuteye
maxotuteye / RadialProgressBar.tsx
Last active June 19, 2024 13:39 — forked from eYinka/tailwind-radial-progress-bar.txt
Tailwind CSS Radial Progress Bar
/* 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}`