Tailwind CSS Radial Progress Bar

RadialProgressBar.tsx

/* FORKED FROM maxotuteye on github https://gist.github.com/maxotuteye/86dc828106847c471a0abbb11a631550
 * IN TURN created from a non-react version by eYinka at https://gist.github.com/eYinka/873be69fae3ef27b103681b8a9f5e379
 */

export const RadialProgressBar = ({
  size = 40,
  progress = 67,
  ringThickness = 10,
  descriptionText = "Progress",
  descriptionTextClass = "text-sm",
  descriptionValue = progress.toFixed(0) + "%",
  descriptionValueClass = "text-lg font-bold",
  colorClassName = "text-primary-500",
}: {
  size: number;
  progress: number;
  ringThickness: number;
  descriptionText?: string;
  descriptionTextClass?: string;
  descriptionValue?: string;
  descriptionValueClass?: string;
  colorClassName?: string;
}) => {
  const width = `w-${size}`;
  const height = `h-${size}`;
  const radius = Number((size * 0.94).toFixed(0));
  const circumference = Number((2 * Math.PI * radius).toFixed(1));
  const strokeDashOffset = circumference - (circumference * progress) / 100;

  return (
    <div className={`relative ${width} ${height}`}>
      <svg className="size-full" viewBox="0 0 100 100">
        <circle
          className="stroke-current text-gray-200"
          strokeWidth={ringThickness}
          cx="50"
          cy="50"
          r={radius}
          fill="transparent"
        />
        <circle
          className={`stroke-current ${colorClassName}`}
          strokeWidth={ringThickness}
          strokeLinecap="round"
          cx="50"
          cy="50"
          r={radius}
          fill="transparent"
          strokeDasharray={circumference}
          strokeDashoffset={`${strokeDashOffset}px`}
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center -space-y-1">
        <p className={`${descriptionTextClass} ${colorClassName}`}>{descriptionText}</p>
        <h5 className={`${descriptionValueClass} ${colorClassName}`}>
          {descriptionValue}
        </h5>
      </div>
    </div>
  );
};

UsageExample.tsx

import React from "react";
import { RadialProgressBar } from "@/components/ui/radial-progress-bar";  // ?? or whatever

const UsageExample = () => {
  return (
    <>
      <RadialProgressBar
        size={40}
        ringThickness={10}
        colorClassName="text-dark-600"
        descriptionValueClass="text-sm font-bold"
        progress="50"
        descriptionText="km left"
        descriptionValue="20 / 40"
      />
    </>
  );
};

export default UsageExample;

Heads up the following is a bad practice for tailwind because the regexes that look for tailwind classes when building the project will fail to recognize this and will not generate CSS for it: const width = w-${size};

The only way this could work in a production build is extremely fragile and based on luck: if you happened to use the exact value e.g. w-4 somewhere else in your code that would be the only reason tailwind would know to generate final production CSS for that class.

If you're wondering why your final build isn't styled right this is your answer.

Use inline style (safest) and/or possibly tailwind arbitrary (square bracket) to define something based on css variables related to the theme.

Thank you for pointing that out @firxworx !

I've actually made some improvements since posting this, so here are the updates.

It looks like this new code (perhaps incorrectly) sets width and height directly rather than using those variables - I guess I must have run into the exact problem you were talking about!

/* FORKED FROM maxotuteye on github https://gist.github.com/maxotuteye/86dc828106847c471a0abbb11a631550
 * IN TURN created from a non-react version by eYinka at https://gist.github.com/eYinka/873be69fae3ef27b103681b8a9f5e379
 *   - see https://gist.github.com/lumotroph/8de1d6e05c4c1dd74c9dacf3731ce1a4 for open source audit trail 
*/


export const RadialProgressBar = ({
  size = 40,
  progress = 67,
  ringThickness = 10,
  descriptionText = "Progress",
  descriptionTextClass = "text-sm",
  descriptionValue = progress.toFixed(0) + "%",
  descriptionValueClass = "text-lg font-bold",
  colorClassName = "text-primary-500",
}: {
  size: number;
  progress: number;
  ringThickness: number;
  descriptionText?: string;
  descriptionTextClass?: string;
  descriptionValue?: string;
  descriptionValueClass?: string;
  colorClassName?: string;
}) => {
  const radius = Number((size * 0.25).toFixed(0));
  const circumference = Number((2 * Math.PI * radius).toFixed(1));
  const strokeDashOffset = circumference - (circumference * progress) / 100;
  // Calculate the dash offset for 90% fill
  const backgroundStrokeDashOffset = circumference - (circumference * 94) / 100;

  return (
    <div
      className={`relative`}
      style={{ width: `${size}px`, height: `${size}px` }}
    >
      <svg
        className="size-full"
        viewBox="0 0 100 100"
        style={{ width: `${size}px`, height: `${size}px` }}
      >
        {/* Background circle - now 90% filled */}
        <circle
          className="stroke-current text-gray-200"
          strokeWidth={ringThickness}
          strokeDasharray={circumference}
          strokeDashoffset={`${backgroundStrokeDashOffset}px`}
          strokeLinecap="round"
          cx="50"
          cy="50"
          r={radius}
          fill="transparent"
          transform="rotate(180 50 50)"
        />
        {/* Percentage fill */}
        <circle
          className={`stroke-current ${colorClassName}`}
          strokeWidth={ringThickness}
          strokeLinecap="round"
          cx="50"
          cy="50"
          r={radius}
          fill="transparent"
          strokeDasharray={circumference}
          strokeDashoffset={`${strokeDashOffset}px`}
          transform="rotate(180 50 50)" // Changed rotation
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center -space-y-1">
        <p className={`${descriptionTextClass} ${colorClassName}`}>
          {descriptionText}
        </p>
        <h5 className={`${descriptionValueClass} ${colorClassName}`}>
          {descriptionValue}
        </h5>
      </div>
    </div>
  );
};