@akshay-bhalala/loaders/dist/index.js

A high-quality, customizable collection of React loader components for your UI: skeletons, spinners, bars, dots, rings, waves, and more. Perfect for modern web apps!

'use strict';

var jsxRuntime = require('react/jsx-runtime');

const SkeletonLoader = ({ width = '100%', height = 20, borderRadius = 4, style, className, }) => {
    return (jsxRuntime.jsx("div", { className: className, style: {
            width,
            height,
            borderRadius,
            background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%)',
            backgroundSize: '400% 100%',
            animation: 'skeleton-loading 1.4s ease infinite',
            ...style,
        } }));
};
// Skeleton loading animation
const styleSheet$5 = document.createElement('style');
styleSheet$5.type = 'text/css';
styleSheet$5.innerText = `
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}`;
document.head.appendChild(styleSheet$5);

const SpinnerLoader = ({ size = 40, color = '#1976d2', thickness = 4, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: {
            display: 'inline-block',
            width: size,
            height: size,
            ...style,
        }, children: jsxRuntime.jsx("svg", { width: size, height: size, viewBox: `0 0 50 50`, style: { display: 'block' }, children: jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: color, strokeWidth: thickness, strokeLinecap: "round", strokeDasharray: "90 150", strokeDashoffset: "0", children: jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }));
};

const DotsLoader = ({ size = 12, color = '#1976d2', dotSpacing = 8, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-flex', alignItems: 'center', ...style }, children: [0, 1, 2].map((i) => (jsxRuntime.jsx("span", { style: {
                width: size,
                height: size,
                borderRadius: '50%',
                background: color,
                marginLeft: i === 0 ? 0 : dotSpacing,
                animation: 'dots-bounce 1.4s infinite both',
                animationDelay: `${i * 0.2}s`,
                display: 'inline-block',
            } }, i))) }));
};
// Dots bounce animation
const styleSheet$4 = document.createElement('style');
styleSheet$4.type = 'text/css';
styleSheet$4.innerText = `
@keyframes dots-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.7; }
  40% { transform: scale(1); opacity: 1; }
}`;
document.head.appendChild(styleSheet$4);

const BarLoader = ({ width = '100%', height = 6, color = '#1976d2', backgroundColor = '#e0e0e0', borderRadius = 4, style, className, }) => {
    return (jsxRuntime.jsx("div", { className: className, style: {
            width,
            height,
            background: backgroundColor,
            borderRadius,
            overflow: 'hidden',
            position: 'relative',
            ...style,
        }, children: jsxRuntime.jsx("div", { style: {
                height: '100%',
                width: '40%',
                background: color,
                borderRadius,
                position: 'absolute',
                left: 0,
                top: 0,
                animation: 'bar-loader-move 1.2s cubic-bezier(0.4,0,0.2,1) infinite',
            } }) }));
};
// Bar loader animation
const styleSheet$3 = document.createElement('style');
styleSheet$3.type = 'text/css';
styleSheet$3.innerText = `
@keyframes bar-loader-move {
  0% { left: -40%; width: 40%; }
  50% { left: 20%; width: 60%; }
  100% { left: 100%; width: 40%; }
}`;
document.head.appendChild(styleSheet$3);

const PulseLoader = ({ size = 18, color = '#1976d2', style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: {
            display: 'inline-block',
            width: size,
            height: size,
            borderRadius: '50%',
            background: color,
            animation: 'pulse-loader 1.2s infinite cubic-bezier(0.66,0,0,1)',
            ...style,
        } }));
};
// Pulse loader animation
const styleSheet$2 = document.createElement('style');
styleSheet$2.type = 'text/css';
styleSheet$2.innerText = `
@keyframes pulse-loader {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}`;
document.head.appendChild(styleSheet$2);

const RingLoader = ({ size = 40, color = '#1976d2', thickness = 4, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-block', width: size, height: size, ...style }, children: jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 50 50", style: { display: 'block' }, children: jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: color, strokeWidth: thickness, strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }));
};

const WaveLoader = ({ barCount = 5, barWidth = 4, barHeight = 20, color = '#1976d2', gap = 4, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-flex', alignItems: 'end', gap, ...style }, children: Array.from({ length: barCount }).map((_, i) => (jsxRuntime.jsx("span", { style: {
                width: barWidth,
                height: barHeight,
                background: color,
                borderRadius: 2,
                animation: 'wave-loader 1.2s infinite',
                animationDelay: `${i * 0.1}s`,
                display: 'inline-block',
            } }, i))) }));
};
// Wave loader animation
const styleSheet$1 = document.createElement('style');
styleSheet$1.type = 'text/css';
styleSheet$1.innerText = `
@keyframes wave-loader {
  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}`;
document.head.appendChild(styleSheet$1);

const DualRingLoader = ({ size = 40, color = '#1976d2', thickness = 4, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-block', width: size, height: size, ...style }, children: jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 50 50", style: { display: 'block' }, children: [jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: color, strokeWidth: thickness, strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }), jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "14", fill: "none", stroke: color, strokeWidth: thickness, strokeDasharray: "22 22", strokeLinecap: "round", children: jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "360 25 25", to: "0 25 25", dur: "1.2s", repeatCount: "indefinite" }) })] }) }));
};

const BounceLoader = ({ ballCount = 3, size = 14, color = '#1976d2', gap = 8, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-flex', alignItems: 'end', gap, ...style }, children: Array.from({ length: ballCount }).map((_, i) => (jsxRuntime.jsx("span", { style: {
                width: size,
                height: size,
                borderRadius: '50%',
                background: color,
                display: 'inline-block',
                animation: 'bounce-loader 0.7s infinite ease-in-out',
                animationDelay: `${i * 0.15}s`,
            } }, i))) }));
};
// Bounce loader animation
const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = `
@keyframes bounce-loader {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-60%); }
}`;
document.head.appendChild(styleSheet);

const CircularProgressLoader = ({ size = 40, color = '#1976d2', thickness = 4, style, className, }) => {
    return (jsxRuntime.jsx("span", { className: className, style: { display: 'inline-block', width: size, height: size, ...style }, children: jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 50 50", style: { display: 'block' }, children: jsxRuntime.jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: color, strokeWidth: thickness, strokeDasharray: "80 200", strokeDashoffset: "0", strokeLinecap: "round", children: jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.9s", repeatCount: "indefinite" }) }) }) }));
};

exports.BarLoader = BarLoader;
exports.BounceLoader = BounceLoader;
exports.CircularProgressLoader = CircularProgressLoader;
exports.DotsLoader = DotsLoader;
exports.DualRingLoader = DualRingLoader;
exports.PulseLoader = PulseLoader;
exports.RingLoader = RingLoader;
exports.SkeletonLoader = SkeletonLoader;
exports.SpinnerLoader = SpinnerLoader;
exports.WaveLoader = WaveLoader;
//# sourceMappingURL=index.js.map