{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "load-ripple",
  "type": "registry:ui",
  "title": "Load Ripple",
  "description": "A simple ripple loader with 5 animated circles and staggered timing.",
  "files": [
    {
      "path": "registry/ruixenui/load-ripple.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport const LoadRipple: React.FC = () => {\n  return (\n    <div className=\"relative h-[250px] aspect-square\">\n      {/* Ripple circles */}\n      <span className=\"absolute inset-[40%] rounded-full border border-gray-500/80 dark:border-gray-300/80 animate-[load-ripple_2s_infinite_ease-in-out] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[98]\" />\n      <span className=\"absolute inset-[30%] rounded-full border border-gray-500/60 dark:border-gray-300/60 animate-[load-ripple_2s_infinite_ease-in-out_0.2s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[97]\" />\n      <span className=\"absolute inset-[20%] rounded-full border border-gray-500/40 dark:border-gray-300/40 animate-[load-ripple_2s_infinite_ease-in-out_0.4s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[96]\" />\n      <span className=\"absolute inset-[10%] rounded-full border border-gray-500/30 dark:border-gray-300/30 animate-[load-ripple_2s_infinite_ease-in-out_0.6s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[95]\" />\n      <span className=\"absolute inset-0 rounded-full border border-gray-500/20 dark:border-gray-300/20 animate-[load-ripple_2s_infinite_ease-in-out_0.8s] bg-gradient-to-tr from-gray-500/10 to-gray-400/10 backdrop-blur-sm z-[94]\" />\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/load-ripple.tsx"
    }
  ],
  "css": {
    "load-ripple": {
      "0%": {
        "transform": "scale(0.2)",
        "opacity": "0.8"
      },
      "70%": {
        "transform": "scale(1)",
        "opacity": "0"
      },
      "100%": {
        "opacity": "0"
      }
    }
  }
}