"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { AnimatedCounter } from "@/components/ui/animated-counter";

interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number;
  size?: number;
  strokeWidth?: number;
  showValue?: boolean;
  label?: string;
  duration?: number;
  valueFormatter?: (value: number) => string;
}

function CircularProgress({
  value,
  size = 140,
  strokeWidth = 10,
  showValue = true,
  label,
  duration = 1200,
  valueFormatter,
  className,
  ...props
}: CircularProgressProps) {
  const normalizedValue = Math.min(100, Math.max(0, value));
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const dashOffset = circumference - (normalizedValue / 100) * circumference;

  return (
    <div
      className={cn("flex flex-col items-center gap-3", className)}
      {...props}
    >
      <div
        className="relative flex items-center justify-center"
        style={{ width: size, height: size }}
      >
        <svg
          width={size}
          height={size}
          className="-rotate-90"
          viewBox={`0 0 ${size} ${size}`}
        >
          <circle
            className="text-muted-foreground/20"
            stroke="currentColor"
            fill="transparent"
            strokeWidth={strokeWidth}
            r={radius}
            cx={size / 2}
            cy={size / 2}
          />
          <motion.circle
            className="text-primary"
            stroke="currentColor"
            fill="transparent"
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            r={radius}
            cx={size / 2}
            cy={size / 2}
            strokeDasharray={circumference}
            initial={{ strokeDashoffset: circumference }}
            animate={{ strokeDashoffset: dashOffset }}
            transition={{ duration: duration / 1000, ease: "easeOut" }}
          />
        </svg>
        {showValue && (
          <div className="absolute inset-0 flex items-center justify-center text-center">
            {valueFormatter ? (
              <span className="text-lg font-semibold text-foreground">
                {valueFormatter(normalizedValue)}
              </span>
            ) : (
              <AnimatedCounter
                value={normalizedValue}
                duration={duration}
                suffix="%"
                className="text-lg font-semibold text-foreground"
              />
            )}
          </div>
        )}
      </div>
      {label && (
        <div className="text-sm text-muted-foreground">{label}</div>
      )}
    </div>
  );
}

export { CircularProgress };
export type { CircularProgressProps };
Circular Progress

Dependencies

Files

Installation
