{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-circle",
  "type": "registry:ui",
  "title": "Loading Circle",
  "description": "A ripple loading animation with multiple concentric circles and gradient effects.",
  "files": [
    {
      "path": "registry/ruixenui/loading-circle.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport const LoadingCircle: React.FC = () => {\n  const circles = Array.from({ length: 8 }); // 8 ripple circles\n\n  return (\n    <div className=\"relative h-[250px] aspect-square\">\n      {circles.map((_, i) => (\n        <span\n          key={i}\n          className={`\n            absolute rounded-full \n            border \n            bg-gradient-to-tr \n            from-gray-300/5 to-gray-200/10 \n            dark:from-gray-500/10 dark:to-gray-400/10 \n            backdrop-blur-sm\n          `}\n          style={{\n            inset: `${i * 5}%`,\n            zIndex: 99 - i,\n            borderColor: `rgba(100,100,100,${0.9 - i * 0.1})`,\n            animation: `loading-circles 2s infinite ease-in-out ${i * 0.15}s`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/loading-circle.tsx"
    }
  ],
  "css": {
    "loading-circles": {
      "0%": {
        "transform": "scale(1)",
        "box-shadow": "0 10px 10px rgba(0, 0, 0, 0.3)"
      },
      "50%": {
        "transform": "scale(1.3)",
        "box-shadow": "0 30px 20px rgba(0, 0, 0, 0.3)"
      },
      "100%": {
        "transform": "scale(1)",
        "box-shadow": "0 10px 10px rgba(0, 0, 0, 0.3)"
      }
    }
  }
}