Circular Progress

1"use client";
2 
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7interface CircularProgressProps extends React.ComponentProps<"div"> {
8  hideText?: boolean;
9  strokeWidth?: number;
10  value: number;
11}
12 
13const CircularProgress = ({
14  value,
15  strokeWidth = 4,
16  className,
17  hideText,
18  ...props
19}: CircularProgressProps) => {
20  const percentage = Math.min(Math.max(value, 0), 100);
21  const radius = 16;
22  const circumference = 2 * Math.PI * radius;
23  const strokeDashoffset = circumference - (percentage / 100) * circumference;
24 
25  return (
26    <div className={cn("relative", className)} {...props}>
27      <progress aria-label="Circular progress" className="sr-only" max={100} value={percentage} />
28      <svg className="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
29        <title>Circular progress</title>
30        <circle
31          className="stroke-current text-primary/30"
32          cx="18"
33          cy="18"
34          fill="none"
35          r={radius}
36          strokeWidth={strokeWidth}
37        />
38        <circle
39          className="stroke-current text-primary"
40          cx="18"
41          cy="18"
42          fill="none"
43          r={radius}
44          strokeDasharray={circumference}
45          strokeDashoffset={strokeDashoffset}
46          strokeLinecap="round"
47          strokeWidth={strokeWidth}
48          style={{
49            transition: "stroke-dashoffset 300ms ease-in-out",
50          }}
51        />
52      </svg>
53 
54      {!hideText && (
55        <div className="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-none">
56          <span className="text-center font-bold text-primary leading-none dark:text-foreground">
57            {percentage}%
58          </span>
59        </div>
60      )}
61    </div>
62  );
63};
64 
65export { CircularProgress };