{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-06",
  "title": "Animated Progress",
  "description": "A progress component with animation effects",
  "dependencies": [
    "radix-ui"
  ],
  "files": [
    {
      "path": "src/components/customized/progress/progress-06.tsx",
      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nexport default function ProgressAnimationDemo() {\n  const [progress, setProgress] = React.useState(13);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className=\"w-[60%]\">\n      <style>\n        {`@keyframes gradient-flow {\n            0% { background-position: 100% 0%; }\n            100% { background-position: -100% 0%; }\n          }\n          .gradient-flow {\n            background: linear-gradient(\n              90deg,\n              var(--primary),\n              color-mix(in oklch, var(--primary) 40%, transparent),\n              var(--primary)\n            );\n            background-size: 200% 100%;\n            animation: gradient-flow 2s linear infinite;\n          }\n          `}\n      </style>\n      <ProgressPrimitive.Root className=\"relative h-1 w-full overflow-hidden rounded-full bg-primary/20\">\n        <ProgressPrimitive.Indicator\n          className=\"gradient-flow relative h-full w-full flex-1 transition-all\"\n          style={{ transform: `translateX(-${100 - (progress || 0)}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}