lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
47 lines • 2.67 kB
JavaScript
;
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const framer_motion_1 = require("framer-motion");
const RippleLoader = ({ icon, size = 250, duration = 2, // use number for easier calculations
logoColor = "grey", }) => {
const baseInset = 40;
const rippleBoxes = Array.from({ length: 5 }, (_, i) => ({
inset: `${baseInset - i * 10}%`,
zIndex: 99 - i,
delay: i * 0.2,
opacity: 1 - i * 0.2,
}));
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [rippleBoxes.map((box, i) => ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute rounded-full border-t backdrop-blur-[5px]", style: {
inset: box.inset,
zIndex: box.zIndex,
borderColor: `rgba(100,100,100,${box.opacity})`,
background: "linear-gradient(0deg, rgba(50, 50, 50, 0.2), rgba(100, 100, 100, 0.2))",
}, animate: {
scale: [1, 1.3, 1],
boxShadow: [
"rgba(0, 0, 0, 0.3) 0px 10px 10px 0px",
"rgba(0, 0, 0, 0.3) 0px 30px 20px 0px",
"rgba(0, 0, 0, 0.3) 0px 10px 10px 0px",
],
}, transition: {
repeat: Infinity,
duration,
delay: box.delay,
ease: "easeInOut",
} }, i))), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 grid place-content-center", style: { zIndex: 100, padding: `${baseInset / 2}%` }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { className: "w-full h-full", animate: { color: [logoColor, "#ffffff", logoColor] }, transition: {
repeat: Infinity,
duration,
delay: 0.1,
ease: "easeInOut",
}, children: (0, jsx_runtime_1.jsx)("span", { className: "w-full h-full text-foreground", style: { display: "inline-block", width: "100%", height: "100%" }, children: icon &&
react_1.default.cloneElement(icon, {
className: "w-full h-full",
}) }) }) })] }));
};
exports.default = RippleLoader;
//# sourceMappingURL=ripple-loader.js.map