react-custom-spinner/dist/index.js

A collection of customizable and lightweight React CSS loader components.

import*as e from"react";var t={d:(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const n=(R={default:()=>e.default},L={},t.d(L,R),L),a=({size:e="40px",color:t="#27ae60",speed:a=1.5,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,backgroundColor:t,animation:`rotate-square ${a}s linear infinite`}},n.default.createElement("style",null,"@keyframes rotate-square { to { transform: rotate(360deg); } }")):null,l=({color:e="#e74c3c",loading:t})=>t?n.default.createElement("div",{style:{display:"flex",gap:"4px",alignItems:"flex-end",height:"30px"}},[1,2,3,4].map((t=>n.default.createElement("div",{key:t,style:{width:"5px",height:"20px",backgroundColor:e,animation:"bounce 1s infinite",animationDelay:.1*t+"s"}}))),n.default.createElement("style",null,"\n        @keyframes bounce {\n          0%, 100% { height: 20px; }\n          50% { height: 30px; }\n        }\n      ")):null,i=({size:e="50px",color:t="red ",speed:a=2,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,border:"4px solid #eee",borderTop:`4px solid ${t}`,borderRadius:"50%",animation:`spin ${a}s linear infinite`}},n.default.createElement("style",null,"@keyframes spin { to { transform: rotate(360deg); } }")):null,r=({size:e="20px",color:t="#8e44ad",loading:a})=>a?n.default.createElement("div",{style:{display:"flex",gap:"5px"}},[0,1,2].map((a=>n.default.createElement("div",{key:a,style:{width:e,height:e,borderRadius:"50%",backgroundColor:t,animation:"wave 1s infinite",animationDelay:.2*a+"s"}}))),n.default.createElement("style",null,"\n        @keyframes wave {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(-15px); }\n        }\n      ")):null,o=({size:e="60px",color:t="#9b59b6",loading:a})=>a?n.default.createElement("div",{style:{display:"inline-block",width:e,height:e}},n.default.createElement("div",{style:{width:"100%",height:"100%",border:`4px solid ${t}`,borderColor:`${t} transparent ${t} transparent`,borderRadius:"50%",animation:"dual-ring 1.2s linear infinite"}}),n.default.createElement("style",null,"\n        @keyframes dual-ring {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n      ")):null,s=({color:e="#2ecc71",loading:t})=>t?n.default.createElement("div",{style:{display:"flex",gap:"6px"}},[0,1,2].map((t=>n.default.createElement("div",{key:t,style:{width:"10px",height:"10px",borderRadius:"50%",backgroundColor:e,animation:"fade 1.4s infinite",animationDelay:.3*t+"s"}}))),n.default.createElement("style",null,"\n        @keyframes fade {\n          0%, 80%, 100% { opacity: 0; }\n          40% { opacity: 1; }\n        }\n      ")):null,d=({color:e="#1abc9c",loading:t})=>t?n.default.createElement("div",{style:{display:"flex",gap:"4px",alignItems:"center",height:"30px"}},[1,2,3].map((t=>n.default.createElement("div",{key:t,style:{width:"6px",height:"10px",backgroundColor:e,animation:"grow 1s infinite",animationDelay:.2*t+"s"}}))),n.default.createElement("style",null,"\n        @keyframes grow {\n          0%, 100% { height: 10px; }\n          50% { height: 30px; }\n        }\n      ")):null,u=({size:e="40px",color:t="#3498db",loading:a})=>a?n.default.createElement("div",{style:{width:e,height:e,borderRadius:"50%",backgroundColor:t,animation:"pulse 1.5s infinite"}},n.default.createElement("style",null,"\n        @keyframes pulse {\n          0% { transform: scale(0.5); opacity: 1; }\n          50% { transform: scale(1.2); opacity: 0.7; }\n          100% { transform: scale(0.5); opacity: 1; }\n        }\n      ")):null,m=({size:e="80px",color:t="#e67e22",loading:a})=>a?n.default.createElement("div",{style:{position:"relative",width:e,height:e}},n.default.createElement("div",{style:{position:"absolute",border:`4px solid ${t}`,borderRadius:"50%",width:"100%",height:"100%",animation:"ripple 1.5s infinite"}}),n.default.createElement("div",{style:{position:"absolute",border:`4px solid ${t}`,borderRadius:"50%",width:"100%",height:"100%",animation:"ripple 1.5s infinite",animationDelay:"0.75s"}}),n.default.createElement("style",null,"\n        @keyframes ripple {\n          0% {\n            top: 50%;\n            left: 50%;\n            width: 0;\n            height: 0;\n            opacity: 1;\n          }\n          100% {\n            top: 0%;\n            left: 0%;\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n          }\n        }\n      ")):null,c=({size:e="12px",color:t="red",speed:a=.8,loading:l})=>{if(!l)return null;const i={width:e,height:e,backgroundColor:t,borderRadius:"50%",display:"inline-block",margin:"0 3px",animation:`blink ${a}s infinite alternate`};return n.default.createElement("div",null,n.default.createElement("span",{style:{...i,animationDelay:"0s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.2s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.4s"}}),n.default.createElement("style",null,"\n        @keyframes blink {\n          0% { opacity: 1; }\n          100% { opacity: 0.2; }\n        }\n      "))},p=({size:e="20px",color:t="crimson",speed:a=.5,loading:l})=>{if(!l)return null;const i={width:e,height:e,backgroundColor:t,borderRadius:"50%",margin:"5px",display:"inline-block",animation:`bounceCircle ${a}s infinite ease-in-out`};return n.default.createElement("div",null,n.default.createElement("span",{style:{...i,animationDelay:"0s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.2s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.4s"}}),n.default.createElement("style",null,"\n        @keyframes bounceCircle {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(-15px); }\n        }\n      "))},f=({size:e="20px",color:t="crimson",speed:a=.6,loading:l})=>{if(!l)return null;const i={width:e,height:e,backgroundColor:t,display:"inline-block",animation:`cube-bounce ${a}s ease-in-out infinite`};return n.default.createElement("div",null,n.default.createElement("span",{style:{...i,marginRight:"5px",animationDelay:"0s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.3s"}}),n.default.createElement("style",null,"\n        @keyframes cube-bounce {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(-15px); }\n        }\n      "))},y=({size:e="40px",color:t="green",speed:a=1.2,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,backgroundColor:t,display:"inline-block",animation:`flip ${a}s infinite ease-in-out`,transformOrigin:"center"}},n.default.createElement("style",null,"\n        @keyframes flip {\n          0% { transform: rotateY(0deg); }\n          50% { transform: rotateY(180deg); }\n          100% { transform: rotateY(360deg); }\n        }\n      ")):null,g=({size:e="30px",color:t="red",speed:a=1,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,backgroundColor:t,transform:"rotate(45deg)",animation:`heartbeat ${a}s infinite ease-in-out`,position:"relative"}},n.default.createElement("div",{style:{content:"",width:e,height:e,backgroundColor:t,borderRadius:"50%",position:"absolute",top:`-${parseInt(e)/2}px`,left:0}}),n.default.createElement("div",{style:{content:"",width:e,height:e,backgroundColor:t,borderRadius:"50%",position:"absolute",left:parseInt(e)/2+"px",top:0}}),n.default.createElement("style",null,"\n        @keyframes heartbeat {\n          0%, 100% { transform: rotate(-45deg) scale(1); }\n          50% { transform: rotate(-45deg) scale(1.2); }\n        }\n      ")):null,h=({size:e="40px",color:t="purple",speed:a=1.5,loading:l})=>l?(parseInt(e),n.default.createElement("div",{style:{width:e,height:e,position:"relative"}},n.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"50%",backgroundColor:t,opacity:.6,position:"absolute",animation:`puff ${a}s infinite ease-in-out`}}),n.default.createElement("style",null,"\n        @keyframes puff {\n          0% {\n            transform: scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: scale(2);\n            opacity: 0;\n          }\n        }\n      "))):null,b=({size:e="40px",color:t="teal",speed:a=1,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,backgroundColor:t,animation:`pulseSquare ${a}s infinite ease-in-out`}},n.default.createElement("style",null,"\n        @keyframes pulseSquare {\n          0%, 100% { transform: scale(1); opacity: 1; }\n          50% { transform: scale(1.5); opacity: 0.5; }\n        }\n      ")):null,x=({size:e="40px",color:t="tomato",speed:a=1.2,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,border:`3px solid ${t}`,borderRadius:"50%",animation:`ringBounce ${a}s infinite alternate ease-in-out`}},n.default.createElement("style",null,"\n        @keyframes ringBounce {\n          0% { transform: scale(1); opacity: 1; }\n          100% { transform: scale(1.4); opacity: 0.6; }\n        }\n      ")):null,E=({size:e="60px",color:t="deepskyblue",speed:a=1.5,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,position:"relative"}},n.default.createElement("div",{style:{position:"absolute",width:"100%",height:"100%",borderRadius:"50%",border:`3px solid ${t}`,animation:`ripplePulse ${a}s infinite`}}),n.default.createElement("style",null,"\n        @keyframes ripplePulse {\n          0% { transform: scale(0.6); opacity: 1; }\n          100% { transform: scale(1.6); opacity: 0; }\n        }\n      ")):null,k=({width:e="200px",height:t="10px",bg:a="#eee",color:l="red",loading:i})=>i?n.default.createElement("div",{style:{position:"relative",overflow:"hidden",width:e,height:t,backgroundColor:a}},n.default.createElement("div",{style:{width:"50%",height:"100%",background:`linear-gradient(90deg, transparent, ${l}, transparent)`,animation:"shimmerMove 1.2s infinite"}}),n.default.createElement("style",null,"\n        @keyframes shimmerMove {\n          0% { transform: translateX(-100%); }\n          100% { transform: translateX(200%); }\n        }\n      ")):null,v=({color:e="orange",barWidth:t="6px",barHeight:a="30px",loading:l})=>{if(!l)return null;const i={width:t,height:a,backgroundColor:e,margin:"0 4px",display:"inline-block",animation:"slideInBar 1s ease-in-out infinite"};return n.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"}},[0,.2,.4].map(((e,t)=>n.default.createElement("span",{key:t,style:{...i,animationDelay:`${e}s`}}))),n.default.createElement("style",null,"\n        @keyframes slideInBar {\n          0% { transform: translateY(0); }\n          50% { transform: translateY(-15px); }\n          100% { transform: translateY(0); }\n        }\n      "))},w=({size:e="40px",color:t="dodgerblue",speed:a=1.5,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,border:`3px solid ${t}`,borderTop:"3px solid transparent",borderRadius:"50%",animation:`spinBubble ${a}s linear infinite`}},n.default.createElement("style",null,"\n        @keyframes spinBubble {\n          to { transform: rotate(360deg); }\n        }\n      ")):null,C=({size:e="50px",color:t="dodgerblue",speed:a=1.5,loading:l})=>{if(!l)return null;const i={width:"10px",height:"10px",backgroundColor:t,borderRadius:"50%",position:"absolute",top:"50%",left:"50%",margin:"-5px"};return n.default.createElement("div",{style:{width:e,height:e,position:"relative",animation:`spinDots ${a}s linear infinite`}},n.default.createElement("span",{style:{...i,transform:"translate(20px, 0)"}}),n.default.createElement("style",null,"\n        @keyframes spinDots {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n      "))},$=({size:e="40px",color:t="steelblue",speed:a=1.2,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:"6px",backgroundColor:t,animation:`stretchBar ${a}s infinite ease-in-out`}},n.default.createElement("style",null,"\n        @keyframes stretchBar {\n          0%, 100% { transform: scaleX(1); }\n          50% { transform: scaleX(1.8); }\n        }\n      ")):null,z=({size:e="40px",color:t="teal",speed:a=1,loading:l})=>l?n.default.createElement("div",{style:{width:e,height:e,border:`4px solid ${t}`,borderTopColor:"transparent",borderRadius:"50%",animation:`tunnel-spin ${a}s linear infinite`}},n.default.createElement("style",null,"\n        @keyframes tunnel-spin {\n          0% { transform: rotate(0deg) scale(1); }\n          50% { transform: rotate(180deg) scale(1.2); }\n          100% { transform: rotate(360deg) scale(1); }\n        }\n      ")):null,D=({size:e="15px",color:t="hotpink",speed:a=.3,loading:l})=>{if(!l)return null;const i={width:e,height:e,backgroundColor:t,borderRadius:"50%",display:"inline-block",margin:"5px",animation:`zigzag ${a}s infinite alternate`};return n.default.createElement("div",null,n.default.createElement("span",{style:{...i,animationDelay:"0s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.2s"}}),n.default.createElement("span",{style:{...i,animationDelay:"0.4s"}}),n.default.createElement("style",null,"\n        @keyframes zigzag {\n          0% { transform: translate(0, 0); }\n          100% { transform: translate(10px, -10px); }\n        }\n      "))};var R,L;export{l as BarsLoader,c as BlinkingLoader,p as BounceCircleLoader,i as CircleLoader,f as CubeBounceLoader,r as DotsWave,o as DualRing,s as FadingDots,y as FlipDotLoader,d as GrowingBars,g as HeartbeatLoader,h as PuffLoader,u as PulseCircle,b as PulseSquareLoader,x as RingBounceLoader,m as RippleLoader,E as RipplePulseLoader,a as RotatingSquare,k as ShimmerLineLoader,v as SlideInBarsLoader,w as SpinBubbleLoader,C as SpinDotsLoader,$ as StretchBarLoader,z as TunnelSpinner,D as ZigZagLoader};