Circle Progress

The CircleProgress component displays a circular progress indicator with customizable size and percentage, built using SVG and Tailwind CSS.

import { CircleProgress } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
size	"sm" | "md" | "lg" | "xl" | "xxl" | "xxxl"	"md"	Controls the circle size (radius, text size, stroke width).
percentage	number	0	The progress percentage (clamped between 0 and 100).
className	string	-	Additional Tailwind CSS classes for custom styling.

Size Configuration

Size	Radius	Text Size	SVG Size	Stroke Width
sm	12	8	28	2
md	16	10	36	3
lg	20	11	44	4
xl	24	12	52	5
xxl	28	14	64	6
xxxl	32	16	72	7

Usage

export default function Example() {
  return (
    <div className="flex gap-6">
      <CircleProgress size="md" percentage={45} />
      <CircleProgress size="xl" percentage={80} className="text-green-500" />
      <CircleProgress size="xxxl" percentage={100} />
    </div>
  );
}

Notes

• Progress percentage is automatically clamped between 0 and 100.
• If percentage is less than 100, the progress stroke is given the text-primary color.
• If percentage is 100, the progress stroke is given the text-success color.
• The text inside the circle scales based on the size prop.