xlibs-components/dist/components/aceternity/loaders.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
export const LoaderOne = () => {
    const transition = (x) => {
        return {
            duration: 1,
            repeat: Infinity,
            repeatType: "loop",
            delay: x * 0.2,
            ease: "easeInOut",
        };
    };
    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(motion.div, { initial: {
                    y: 0,
                }, animate: {
                    y: [0, 10, 0],
                }, transition: transition(0), className: "h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300" }), _jsx(motion.div, { initial: {
                    y: 0,
                }, animate: {
                    y: [0, 10, 0],
                }, transition: transition(1), className: "h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300" }), _jsx(motion.div, { initial: {
                    y: 0,
                }, animate: {
                    y: [0, 10, 0],
                }, transition: transition(2), className: "h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300" })] }));
};
export const LoaderTwo = () => {
    const transition = (x) => {
        return {
            duration: 2,
            repeat: Infinity,
            repeatType: "loop",
            delay: x * 0.2,
            ease: "easeInOut",
        };
    };
    return (_jsxs("div", { className: "flex items-center", children: [_jsx(motion.div, { transition: transition(0), initial: {
                    x: 0,
                }, animate: {
                    x: [0, 20, 0],
                }, className: "h-4 w-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500" }), _jsx(motion.div, { initial: {
                    x: 0,
                }, animate: {
                    x: [0, 20, 0],
                }, transition: transition(0.4), className: "h-4 w-4 -translate-x-2 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500" }), _jsx(motion.div, { initial: {
                    x: 0,
                }, animate: {
                    x: [0, 20, 0],
                }, transition: transition(0.8), className: "h-4 w-4 -translate-x-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500" })] }));
};
export const LoaderThree = () => {
    return (_jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", 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)]", children: [_jsx(motion.path, { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx(motion.path, { initial: { pathLength: 0, fill: "var(--fill-initial)" }, animate: { pathLength: 1, fill: "var(--fill-final)" }, transition: {
                    duration: 2,
                    ease: "easeInOut",
                    repeat: Infinity,
                    repeatType: "reverse",
                }, d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" })] }));
};
export const LoaderFour = ({ text = "Loading..." }) => {
    return (_jsxs("div", { className: "relative font-bold text-black [perspective:1000px] dark:text-white", children: [_jsx(motion.span, { animate: {
                    skew: [0, -40, 0],
                    scaleX: [1, 2, 1],
                }, transition: {
                    duration: 0.05,
                    repeat: Infinity,
                    repeatType: "reverse",
                    repeatDelay: 2,
                    ease: "linear",
                    times: [0, 0.2, 0.5, 0.8, 1],
                }, className: "relative z-20 inline-block", children: text }), _jsx(motion.span, { className: "absolute inset-0 text-[#00e571]/50 blur-[0.5px] dark:text-[#00e571]", animate: {
                    x: [-2, 4, -3, 1.5, -2],
                    y: [-2, 4, -3, 1.5, -2],
                    opacity: [0.3, 0.9, 0.4, 0.8, 0.3],
                }, transition: {
                    duration: 0.5,
                    repeat: Infinity,
                    repeatType: "reverse",
                    ease: "linear",
                    times: [0, 0.2, 0.5, 0.8, 1],
                }, children: text }), _jsx(motion.span, { className: "absolute inset-0 text-[#8b00ff]/50 dark:text-[#8b00ff]", animate: {
                    x: [0, 1, -1.5, 1.5, -1, 0],
                    y: [0, -1, 1.5, -0.5, 0],
                    opacity: [0.4, 0.8, 0.3, 0.9, 0.4],
                }, transition: {
                    duration: 0.8,
                    repeat: Infinity,
                    repeatType: "reverse",
                    ease: "linear",
                    times: [0, 0.3, 0.6, 0.8, 1],
                }, children: text })] }));
};
export const LoaderFive = ({ text }) => {
    return (_jsx("div", { className: "font-sans font-bold [--shadow-color:var(--color-neutral-500)] dark:[--shadow-color:var(--color-neutral-100)]", children: text.split("").map((char, i) => (_jsx(motion.span, { className: "inline-block", initial: { scale: 1, opacity: 0.5 }, animate: {
                scale: [1, 1.1, 1],
                textShadow: [
                    "0 0 0 var(--shadow-color)",
                    "0 0 1px var(--shadow-color)",
                    "0 0 0 var(--shadow-color)",
                ],
                opacity: [0.5, 1, 0.5],
            }, transition: {
                duration: 0.5,
                repeat: Infinity,
                repeatType: "loop",
                delay: i * 0.05,
                ease: "easeInOut",
                repeatDelay: 2,
            }, children: char === " " ? "\u00A0" : char }, i))) }));
};