{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-circular-progress-bar",
  "type": "registry:ui",
  "title": "Animated Circular Progress Bar",
  "description": "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.",
  "files": [
    {
      "path": "registry/magicui/animated-circular-progress-bar.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\ninterface AnimatedCircularProgressBarProps {\n  max?: number\n  min?: number\n  value: number\n  gaugePrimaryColor: string\n  gaugeSecondaryColor: string\n  className?: string\n}\n\nexport function AnimatedCircularProgressBar({\n  max = 100,\n  min = 0,\n  value = 0,\n  gaugePrimaryColor,\n  gaugeSecondaryColor,\n  className,\n}: AnimatedCircularProgressBarProps) {\n  const circumference = 2 * Math.PI * 45\n  const percentPx = circumference / 100\n  const currentPercent = Math.round(((value - min) / (max - min)) * 100)\n\n  return (\n    <div\n      className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n      style={\n        {\n          \"--circle-size\": \"100px\",\n          \"--circumference\": circumference,\n          \"--percent-to-px\": `${percentPx}px`,\n          \"--gap-percent\": \"5\",\n          \"--offset-factor\": \"0\",\n          \"--transition-length\": \"1s\",\n          \"--transition-step\": \"200ms\",\n          \"--delay\": \"0s\",\n          \"--percent-to-deg\": \"3.6deg\",\n          transform: \"translateZ(0)\",\n        } as React.CSSProperties\n      }\n    >\n      <svg\n        fill=\"none\"\n        className=\"size-full\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 100 100\"\n      >\n        {currentPercent <= 90 && currentPercent >= 0 && (\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            strokeWidth=\"10\"\n            strokeDashoffset=\"0\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"opacity-100\"\n            style={\n              {\n                stroke: gaugeSecondaryColor,\n                \"--stroke-percent\": 90 - currentPercent,\n                \"--offset-factor-secondary\": \"calc(1 - var(--offset-factor))\",\n                strokeDasharray:\n                  \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                transform:\n                  \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                transition: \"all var(--transition-length) ease var(--delay)\",\n                transformOrigin:\n                  \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n              } as React.CSSProperties\n            }\n          />\n        )}\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"45\"\n          strokeWidth=\"10\"\n          strokeDashoffset=\"0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"opacity-100\"\n          style={\n            {\n              stroke: gaugePrimaryColor,\n              \"--stroke-percent\": currentPercent,\n              strokeDasharray:\n                \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n              transition:\n                \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n              transitionProperty: \"stroke-dasharray,transform\",\n              transform:\n                \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n              transformOrigin:\n                \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n            } as React.CSSProperties\n          }\n        />\n      </svg>\n      <span\n        data-current-value={currentPercent}\n        className=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-(--delay) duration-(--transition-length) ease-linear\"\n      >\n        {currentPercent}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}