{
  "name": "loader",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/loader.tsx",
      "content": "\"use client\";\nimport { motion } from \"motion/react\";\nimport React from \"react\";\n\nexport const LoaderOne = () => {\n  const transition = (x: number) => {\n    return {\n      duration: 1,\n      repeat: Infinity,\n      repeatType: \"loop\" as const,\n      delay: x * 0.2,\n      ease: \"easeInOut\" as const,\n    };\n  };\n  return (\n    <div className=\"flex items-center gap-2\">\n      <motion.div\n        initial={{\n          y: 0,\n        }}\n        animate={{\n          y: [0, 10, 0],\n        }}\n        transition={transition(0)}\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\n      />\n      <motion.div\n        initial={{\n          y: 0,\n        }}\n        animate={{\n          y: [0, 10, 0],\n        }}\n        transition={transition(1)}\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\n      />\n      <motion.div\n        initial={{\n          y: 0,\n        }}\n        animate={{\n          y: [0, 10, 0],\n        }}\n        transition={transition(2)}\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\n      />\n    </div>\n  );\n};\n\nexport const LoaderTwo = () => {\n  const transition = (x: number) => {\n    return {\n      duration: 2,\n      repeat: Infinity,\n      repeatType: \"loop\" as const,\n      delay: x * 0.2,\n      ease: \"easeInOut\" as const,\n    };\n  };\n  return (\n    <div className=\"flex items-center\">\n      <motion.div\n        transition={transition(0)}\n        initial={{\n          x: 0,\n        }}\n        animate={{\n          x: [0, 20, 0],\n        }}\n        className=\"h-4 w-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500\"\n      />\n      <motion.div\n        initial={{\n          x: 0,\n        }}\n        animate={{\n          x: [0, 20, 0],\n        }}\n        transition={transition(0.4)}\n        className=\"h-4 w-4 -translate-x-2 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500\"\n      />\n      <motion.div\n        initial={{\n          x: 0,\n        }}\n        animate={{\n          x: [0, 20, 0],\n        }}\n        transition={transition(0.8)}\n        className=\"h-4 w-4 -translate-x-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500\"\n      />\n    </div>\n  );\n};\n\nexport const LoaderThree = () => {\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"h-20 w-20 stroke-neutral-500 [--fill-final:var(--color-yellow-300)] [--fill-initial:var(--color-neutral-50)] dark:stroke-neutral-100 dark:[--fill-final:var(--color-yellow-500)] dark:[--fill-initial:var(--color-neutral-800)]\"\n    >\n      <motion.path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <motion.path\n        initial={{ pathLength: 0, fill: \"var(--fill-initial)\" }}\n        animate={{ pathLength: 1, fill: \"var(--fill-final)\" }}\n        transition={{\n          duration: 2,\n          ease: \"easeInOut\" as const,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n        }}\n        d=\"M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11\"\n      />\n    </motion.svg>\n  );\n};\n\nexport const LoaderFour = ({ text = \"Loading...\" }: { text?: string }) => {\n  return (\n    <div className=\"relative font-bold text-black [perspective:1000px] dark:text-white\">\n      <motion.span\n        animate={{\n          skewX: [0, -40, 0],\n          scaleX: [1, 2, 1],\n        }}\n        transition={{\n          duration: 0.05,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n          repeatDelay: 2,\n          ease: \"linear\" as const,\n          times: [0, 0.2, 0.5, 0.8, 1],\n        }}\n        className=\"relative z-20 inline-block\"\n      >\n        {text}\n      </motion.span>\n      <motion.span\n        className=\"absolute inset-0 text-[#00e571]/50 blur-[0.5px] dark:text-[#00e571]\"\n        animate={{\n          x: [-2, 4, -3, 1.5, -2],\n          y: [-2, 4, -3, 1.5, -2],\n          opacity: [0.3, 0.9, 0.4, 0.8, 0.3],\n        }}\n        transition={{\n          duration: 0.5,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n          ease: \"linear\" as const,\n          times: [0, 0.2, 0.5, 0.8, 1],\n        }}\n      >\n        {text}\n      </motion.span>\n      <motion.span\n        className=\"absolute inset-0 text-[#8b00ff]/50 dark:text-[#8b00ff]\"\n        animate={{\n          x: [0, 1, -1.5, 1.5, -1, 0],\n          y: [0, -1, 1.5, -0.5, 0],\n          opacity: [0.4, 0.8, 0.3, 0.9, 0.4],\n        }}\n        transition={{\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n          ease: \"linear\" as const,\n          times: [0, 0.3, 0.6, 0.8, 1],\n        }}\n      >\n        {text}\n      </motion.span>\n    </div>\n  );\n};\n\nexport const LoaderFive = ({ text }: { text: string }) => {\n  return (\n    <div className=\"font-sans font-bold [--shadow-color:var(--color-neutral-500)] dark:[--shadow-color:var(--color-neutral-100)]\">\n      {text.split(\"\").map((char, i) => (\n        <motion.span\n          key={i}\n          className=\"inline-block\"\n          initial={{ scale: 1, opacity: 0.5 }}\n          animate={{\n            scale: [1, 1.1, 1],\n            textShadow: [\n              \"0 0 0 var(--shadow-color)\",\n              \"0 0 1px var(--shadow-color)\",\n              \"0 0 0 var(--shadow-color)\",\n            ],\n            opacity: [0.5, 1, 0.5],\n          }}\n          transition={{\n            duration: 0.5,\n            repeat: Infinity,\n            repeatType: \"loop\",\n            delay: i * 0.05,\n            ease: \"easeInOut\" as const,\n            repeatDelay: 2,\n          }}\n        >\n          {char === \" \" ? \"\\u00A0\" : char}\n        </motion.span>\n      ))}\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/loader.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Loader"
}