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.
24 lines • 4.96 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpectrumLoader = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("../lib/utils");
const SpectrumLoader = ({ size = 48, strokeWidth = 4, duration = 2, colors = ["#ff8000", "#00ff19", "#9900ff", "#ffff00", "#FF0000", "#00CCFF"], glow = true, className, }) => {
const id = (0, react_1.useId)().replace(/:/g, "");
const maskId = `mask-${id}`;
const filterId = `glow-${id}`;
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("relative flex items-center justify-center overflow-visible", className), style: { width: size, height: size }, children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", className: "w-full h-full overflow-visible", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("defs", { children: [glow && ((0, jsx_runtime_1.jsxs)("filter", { id: filterId, y: "-100%", x: "-100%", width: "300%", height: "300%", children: [(0, jsx_runtime_1.jsx)("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1.2", result: "blur" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "saturate", values: "3" }), (0, jsx_runtime_1.jsx)("feComposite", { in: "SourceGraphic", operator: "over" })] })), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-a`, cx: "0", cy: "24", r: "24", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[0] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[0], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-b`, cx: "24", cy: "24", r: "24", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[1] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[1], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-c`, cx: "12", cy: "0", r: "12", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[2] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[2], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-d`, cx: "12", cy: "12", r: "12", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[3] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[3], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-e`, cx: "0", cy: "0", r: "24", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[4] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[4], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: `${id}-f`, cx: "24", cy: "0", r: "20", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colors[5] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: colors[5], stopOpacity: "0" })] }), (0, jsx_runtime_1.jsx)("mask", { id: maskId, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.circle, { cx: "12", cy: "12", r: "8", fill: "none", stroke: "white", strokeWidth: strokeWidth, pathLength: "1.025", animate: {
strokeDashoffset: [1.05, 2.1, 3.15],
}, transition: {
duration: duration,
repeat: Infinity,
ease: "easeInOut",
times: [0, 0.5, 1],
}, style: { strokeDasharray: "1.05" } }) })] }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "8", fill: "none", strokeWidth: strokeWidth, stroke: "currentColor", className: "opacity-[0.08]" }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.g, { animate: { rotate: -360 }, transition: { duration: duration * 1.5, repeat: Infinity, ease: "linear" }, style: { transformOrigin: "center", transformBox: "fill-box" }, filter: glow ? `url(#${filterId})` : undefined, children: (0, jsx_runtime_1.jsxs)("g", { mask: `url(#${maskId})`, children: [(0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-a)`, width: "24", height: "24" }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-b)`, width: "24", height: "24" }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-c)`, width: "24", height: "24" }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-d)`, width: "24", height: "24" }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-e)`, width: "24", height: "24" }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id}-f)`, width: "24", height: "24" })] }) })] }) }));
};
exports.SpectrumLoader = SpectrumLoader;
exports.default = exports.SpectrumLoader;
//# sourceMappingURL=SpectrumLoader.js.map