vibrant-loaders
Version:
A collection of unique orange-themed loaders for shopping websites
3 lines (2 loc) • 34.2 kB
JavaScript
import e,{useState as t,useEffect as a}from"react";import{ShoppingCart as r,Package as n,CreditCard as i,Check as o,Loader as s,Cloud as l,ArrowUp as c,ArrowDown as m}from"lucide-react";!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('/*! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\\/2{left:50%}.right-1\\/2{right:50%}.top-0{top:0}.top-1\\/2{top:50%}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\\/2{height:50%}.h-1\\/3{height:33.333333%}.h-1\\/4{height:25%}.h-2{height:.5rem}.h-2\\/5{height:40%}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-full{height:100%}.h-screen{height:100vh}.w-0\\.5{width:.125rem}.w-1{width:.25rem}.w-1\\.5{width:.375rem}.w-1\\/12{width:8.333333%}.w-1\\/2{width:50%}.w-1\\/3{width:33.333333%}.w-1\\/4{width:25%}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-full{width:100%}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.translate-x-1\\/2{--tw-translate-x:50%}.transform,.translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.animate-bounce{animation:bounce 1s infinite}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}0%,to{opacity:1}}.animate-pulse{animation:pulse 1.5s cubic-bezier(.4,0,.6,1) infinite}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-spin-slow{animation:spin 20s linear infinite}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-4{gap:1rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-dashed{border-style:dashed}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity))}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity))}.border-t-transparent{border-top-color:transparent}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(199 210 254/var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.bg-pink-300{--tw-bg-opacity:1;background-color:rgb(249 168 212/var(--tw-bg-opacity))}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153/var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity))}.bg-purple-300{--tw-bg-opacity:1;background-color:rgb(216 180 254/var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252/var(--tw-bg-opacity))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-teal-300{--tw-bg-opacity:1;background-color:rgb(94 234 212/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-indigo-100{--tw-gradient-from:#e0e7ff var(--tw-gradient-from-position);--tw-gradient-to:rgba(224,231,255,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-900{--tw-gradient-from:#312e81 var(--tw-gradient-from-position);--tw-gradient-to:rgba(49,46,129,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-300{--tw-gradient-from:#fdba74 var(--tw-gradient-from-position);--tw-gradient-to:hsla(31,97%,72%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-yellow-400{--tw-gradient-from:#facc15 var(--tw-gradient-from-position);--tw-gradient-to:rgba(250,204,21,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-indigo-200{--tw-gradient-to:#c7d2fe var(--tw-gradient-to-position)}.to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}.to-purple-900{--tw-gradient-to:#581c87 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-orange-300\\/50{--tw-shadow-color:hsla(31,97%,72%,.5);--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}');const d=({size:t=16,coreColor:a="orange-500",electronColor:r="orange-300",ringColor:n="orange-400",backgroundColor:i="orange-50"})=>e.createElement("div",{className:`vl-atom-loader vl-bg-${i}`},e.createElement("style",{jsx:!0},`\n .vl-atom-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n }\n .vl-atom-core {\n width: ${t}px;\n height: ${t}px;\n background-color: var(--vl-core-color);\n border-radius: 50%;\n animation: vl-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n .vl-atom-electron {\n position: absolute;\n width: ${t/4}px;\n height: ${t/4}px;\n background-color: var(--vl-electron-color);\n border-radius: 50%;\n opacity: 0.75;\n }\n .vl-atom-ring {\n position: absolute;\n width: ${1.5*t}px;\n height: ${1.5*t}px;\n border: 4px solid var(--vl-ring-color);\n border-radius: 50%;\n animation: vl-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n opacity: 0;\n }\n @keyframes vl-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n @keyframes vl-ping {\n 75%, 100% { transform: scale(2); opacity: 0; }\n }\n `),e.createElement("div",{className:"vl-atom-container",style:{"--vl-core-color":`var(--vl-${a}, orange)`,"--vl-electron-color":`var(--vl-${r}, yellow)`,"--vl-ring-color":`var(--vl-${n}, red)`}},e.createElement("div",{className:"vl-atom-core"}),[...Array(3)].map(((a,r)=>e.createElement("div",{key:r,className:"vl-atom-electron",style:{top:"50%",left:"50%",transform:`translate(-50%, -50%) rotate(${120*r}deg) translateX(${t/2}px)`,animation:"vl-orbit 1s linear infinite",animationDelay:.33*r+"s"}}))),[...Array(3)].map(((t,a)=>e.createElement("div",{key:a,className:"vl-atom-ring",style:{animationDelay:.5*a+"s"}}))))),g=({size:t=200})=>e.createElement("div",{className:"flex items-center justify-center h-screen bg-gradient-to-br from-indigo-900 to-purple-900"},e.createElement("div",{className:"relative",style:{width:t,height:t}},e.createElement("div",{className:"absolute inset-0 flex items-center justify-center"},e.createElement("div",{className:"w-1/3 h-1/3 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full animate-pulse shadow-lg shadow-orange-300/50"})),[...Array(3)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute w-full h-full animate-spin",style:{animationDuration:5*(a+2)+"s"}},e.createElement("div",{className:"absolute w-1/12 h-1/12 bg-gradient-to-br from-orange-300 to-red-500 rounded-full",style:{top:"50%",left:10+25*a+"%",transform:"translate(-50%, -50%)",boxShadow:`0 0 15px 5px rgba(255, 165, 0, 0.${5+a})`}})))),[...Array(50)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute rounded-full animate-twinkle",style:{width:3*Math.random()+1+"px",height:3*Math.random()+1+"px",top:100*Math.random()+"%",left:100*Math.random()+"%",backgroundColor:`rgba(255, 255, 255, ${.5*Math.random()+.5})`,animationDuration:3*Math.random()+2+"s",animationDelay:2*Math.random()+"s"}}))),e.createElement("div",{className:"absolute inset-0 border-4 border-purple-400 rounded-full animate-spin",style:{animationDuration:"20s"}}),[...Array(3)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute inset-0 border-2 border-purple-300 rounded-full animate-ping opacity-0",style:{animationDelay:.5*a+"s",animationDuration:"3s"}}))))),p=({size:t=40})=>{const a=["blue-400","green-400","yellow-400","red-400"],r="gray-300";return e.createElement("div",{className:"inline-flex items-center justify-center"},e.createElement("div",{className:"relative",style:{width:t,height:1.5*t,overflow:"hidden"}},[...Array(10)].map(((t,r)=>e.createElement("div",{key:r,className:"absolute w-full"},e.createElement("div",{className:`w-2 h-2 rounded-full bg-${a[r%4]} absolute`,style:{left:40*Math.sin(r/5*Math.PI)+50+"%",top:10*r+"%",transform:"translate(-50%, -50%)",animation:`dnaMove 3s ease-in-out ${.1*r}s infinite alternate`}}),e.createElement("div",{className:`w-2 h-2 rounded-full bg-${a[(r+2)%4]} absolute`,style:{right:40*Math.sin(r/5*Math.PI)+50+"%",top:10*r+"%",transform:"translate(50%, -50%)",animation:`dnaMove 3s ease-in-out ${.1*r}s infinite alternate-reverse`}})))),e.createElement("div",{className:`absolute left-1/2 top-0 w-0.5 h-full bg-${r} transform -translate-x-1/2`}),e.createElement("div",{className:`absolute right-1/2 top-0 w-0.5 h-full bg-${r} transform translate-x-1/2`})),e.createElement("style",{jsx:!0},"\n @keyframes dnaMove {\n 0% { transform: translate(-50%, -50%) scale(1); }\n 50% { transform: translate(-50%, -50%) scale(1.2); }\n 100% { transform: translate(-50%, -50%) scale(1); }\n }\n "))},f=({size:t=200})=>e.createElement("div",{className:"flex items-center justify-center h-screen bg-gray-900"},e.createElement("div",{className:"relative animate-spin-slow",style:{width:t,height:t}},[...Array(4)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute w-full h-full bg-purple-500 opacity-20",style:{transform:`rotate(${45*a}deg)`,borderRadius:"40% 60% 60% 40% / 60% 30% 70% 40%"}}))),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-1/4 h-1/4 bg-yellow-300 rounded-full transform -translate-x-1/2 -translate-y-1/2"}),[...Array(100)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute rounded-full",style:{width:3*Math.random()+1+"px",height:3*Math.random()+1+"px",top:100*Math.random()+"%",left:100*Math.random()+"%",backgroundColor:["white","blue-200","yellow-200"][a%3],opacity:.8*Math.random()+.2,animation:`twinkle ${3*Math.random()+2}s infinite alternate`}})))),e.createElement("style",{jsx:!0},"\n @keyframes twinkle {\n 0% { opacity: 0.2; }\n 100% { opacity: 1; }\n }\n .animate-spin-slow {\n animation: spin 20s linear infinite;\n }\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n ")),w=({size:t=200})=>e.createElement("div",{className:"flex items-center justify-center h-screen bg-blue-100"},e.createElement("div",{className:"relative",style:{width:t,height:t/2,overflow:"hidden"}},[...Array(5)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute w-full h-full bg-blue-400 opacity-20",style:{animation:`wave ${3+.5*a}s ease-in-out ${.2*a}s infinite alternate`,borderRadius:"40% 60% 60% 40% / 60% 60% 40% 40%"}}))),[...Array(30)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute rounded-full bg-white",style:{width:6*Math.random()+2+"px",height:6*Math.random()+2+"px",top:100*Math.random()+"%",left:100*Math.random()+"%",opacity:.8*Math.random()+.2,animation:`float ${3*Math.random()+2}s infinite alternate`}})))),e.createElement("style",{jsx:!0},"\n @keyframes wave {\n 0% { transform: translateY(5%) rotate(0deg); }\n 100% { transform: translateY(-5%) rotate(360deg); }\n }\n @keyframes float {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-10px); }\n }\n ")),b=({size:t=200})=>e.createElement("div",{className:"flex items-center justify-center h-screen bg-gray-100"},e.createElement("div",{className:"relative rounded-full bg-white shadow-xl",style:{width:t,height:t}},[...Array(12)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute w-1 h-3 bg-gray-400",style:{top:"10%",left:"50%",transform:`rotate(${30*a}deg) translateX(-50%)`,transformOrigin:"50% 450%"}}))),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-1.5 h-1/3 bg-black rounded-full",style:{transform:"translate(-50%, -100%)",transformOrigin:"50% 100%",animation:"rotate 43200s linear infinite"}}),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-1 h-2/5 bg-gray-600 rounded-full",style:{transform:"translate(-50%, -100%)",transformOrigin:"50% 100%",animation:"rotate 3600s linear infinite"}}),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-0.5 h-1/2 bg-red-500 rounded-full",style:{transform:"translate(-50%, -100%)",transformOrigin:"50% 100%",animation:"rotate 60s linear infinite"}}),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-3 h-3 bg-red-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"})),e.createElement("style",{jsx:!0},"\n @keyframes rotate {\n from { transform: translate(-50%, -100%) rotate(0deg); }\n to { transform: translate(-50%, -100%) rotate(360deg); }\n }\n ")),u=({size:t=200,gridSize:a=3})=>e.createElement("div",{className:"flex items-center justify-center h-screen bg-purple-100"},e.createElement("div",{className:"grid gap-4",style:{width:t,height:t,gridTemplateColumns:`repeat(${a}, 1fr)`}},[...Array(a*a)].map(((t,a)=>e.createElement("div",{key:a,className:"relative flex items-center justify-center"},e.createElement("div",{className:"w-1/2 h-1/2 bg-purple-500 rounded-full"}),e.createElement("div",{className:"absolute w-full h-full bg-purple-300 rounded-full opacity-0",style:{animation:`pulse 1.5s ease-in-out ${.1*a}s infinite`}}))))),e.createElement("style",{jsx:!0},"\n @keyframes pulse {\n 0%, 100% { transform: scale(0.5); opacity: 0; }\n 50% { transform: scale(1.5); opacity: 0.7; }\n }\n ")),y=({size:t=40,squareColors:a=["red-500","blue-500","green-500","yellow-500"]})=>e.createElement("div",{className:"inline-flex items-center justify-center"},e.createElement("div",{className:"relative",style:{width:t,height:t}},a.map(((t,a)=>e.createElement("div",{key:a,className:`absolute w-1/2 h-1/2 bg-${t}`,style:{top:a<2?"0":"50%",left:a%2==0?"0":"50%",transformOrigin:0===a?"100% 100%":1===a?"0% 100%":2===a?"100% 0%":"0% 0%",animation:`rotate-${["tl","tr","bl","br"][a]} 2s ease-in-out infinite`}})))),e.createElement("style",{jsx:!0},"\n @keyframes rotate-tl {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(90deg); }\n }\n @keyframes rotate-tr {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(-90deg); }\n }\n @keyframes rotate-bl {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(-90deg); }\n }\n @keyframes rotate-br {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(90deg); }\n }\n ")),h=({size:t=80,dotSize:a=16,dotColors:r=["red-500","blue-500","green-500"],backgroundColor:n="gray-100"})=>e.createElement("div",{className:`flex items-center justify-center h-screen bg-${n}`},e.createElement("div",{className:`flex space-x-4 w-${t}`},r.map(((t,r)=>e.createElement("div",{key:r,className:`w-${a} h-${a} bg-${t} rounded-full`,style:{animation:`bounce 0.6s ease-in-out ${.1*r}s infinite alternate`}})))),e.createElement("style",{jsx:!0},"\n @keyframes bounce {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-20px); }\n }\n ")),v=({size:t=80,color:a="blue"})=>e.createElement("div",{className:"inline-flex items-center justify-center"},e.createElement("div",{className:"relative bg-gray-100 rounded-lg overflow-hidden",style:{width:t,height:t}},e.createElement("div",{className:"absolute inset-0 flex items-center"},e.createElement("div",{className:"animate-cartMove",style:{animationDuration:"3s"}},e.createElement(r,{size:.4*t,className:`text-${a}-600`}))),[n,i,o].map(((r,n)=>e.createElement("div",{key:n,className:"absolute",style:{top:25+25*n+"%",right:"10%",animation:`fadeInOut 9s ease-in-out ${3*n}s infinite`,opacity:0}},e.createElement(r,{size:.25*t,className:`text-${a}-${400+100*n}`})))),e.createElement("div",{className:"absolute inset-0 border-4 border-dashed rounded-lg animate-spin opacity-20",style:{borderColor:`var(--tw-text-opacity-${a}-400)`,animationDuration:"12s"}})),e.createElement("style",{jsx:!0},"\n @keyframes cartMove {\n 0%, 100% { transform: translateX(-70%); }\n 50% { transform: translateX(70%); }\n }\n @keyframes fadeInOut {\n 0%, 33%, 100% { opacity: 0; transform: scale(0.8); }\n 16%, 17% { opacity: 1; transform: scale(1); }\n }\n ")),x=({imageSrc:r,size:n=40,spinDuration:i=1.5})=>{const[o,l]=t(!1),[c,m]=t(!1);a((()=>{if(r){const e=new Image;e.onload=()=>l(!0),e.onerror=()=>m(!0),e.src=r}}),[r]);return e.createElement("div",{className:"inline-flex items-center justify-center"},e.createElement("div",{className:"relative",style:{animation:`spin ${i}s linear infinite`}},!r||c?e.createElement(s,{size:n,className:"text-blue-600 animate-spin"}):o?e.createElement("img",{src:r,alt:"Loading",className:"rounded-full object-cover",style:{width:n,height:n}}):e.createElement("div",{className:"bg-gray-200 rounded-full animate-pulse",style:{width:n,height:n}})),e.createElement("style",{jsx:!0},"\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n "))},k=({type:t="upload",progress:a=0})=>{const r="upload"===t;return e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-100 to-indigo-200"},e.createElement("div",{className:"relative flex flex-col items-center"},e.createElement("div",{className:"relative"},e.createElement(l,{size:80,className:"text-indigo-500"}),r?e.createElement(c,{size:40,className:"text-green-500 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce"}):e.createElement(m,{size:40,className:"text-green-500 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce"})),e.createElement("div",{className:"mt-4 w-56 h-2 bg-indigo-200 rounded-full overflow-hidden"},e.createElement("div",{className:"h-full bg-indigo-500 transition-all duration-300 ease-out",style:{width:`${a}%`}})),e.createElement("div",{className:"mt-2 text-indigo-600 text-base font-semibold"},r?"Uploading":"Downloading",": ",a,"%")))},E=()=>e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-900 overflow-hidden"},e.createElement("div",{className:"grid grid-cols-10 gap-1"},[...Array(100)].map(((t,a)=>e.createElement("div",{key:a,className:"w-6 h-6 flex items-center justify-center text-sm font-mono",style:{animation:"binaryFlash 1s ease-in-out infinite",animationDelay:2*Math.random()+"s"}},Math.random()>.5?"1":"0")))),e.createElement("style",{jsx:!0},"\n @keyframes binaryFlash {\n 0%, 100% { color: #4a5568; }\n 50% { color: #48bb78; }\n }\n ")),N=()=>e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-purple-100 overflow-hidden"},e.createElement("div",{className:"relative w-64 h-64"},[...Array(15)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute bg-purple-400 rounded-full opacity-70",style:{width:20*Math.random()+10+"px",height:20*Math.random()+10+"px",top:100*Math.random()+"%",left:100*Math.random()+"%",animation:`float ${3*Math.random()+2}s ease-in-out infinite alternate`}})))),e.createElement("style",{jsx:!0},"\n @keyframes float {\n from { transform: translateY(0) scale(1); }\n to { transform: translateY(-15px) scale(1.05); }\n }\n ")),$=()=>e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-100 overflow-hidden"},e.createElement("div",{className:"relative w-64 h-64"},[...Array(5)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute w-3 h-3 bg-teal-500 rounded-full",style:{top:50+35*Math.sin(2*a*Math.PI/5)+"%",left:50+35*Math.cos(2*a*Math.PI/5)+"%",animation:`orbit ${3+a}s linear infinite`}},e.createElement("div",{className:"w-full h-full bg-teal-300 rounded-full animate-ping"})))),e.createElement("div",{className:"absolute top-1/2 left-1/2 w-6 h-6 bg-pink-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"},e.createElement("div",{className:"w-full h-full bg-pink-300 rounded-full animate-ping"}))),e.createElement("style",{jsx:!0},"\n @keyframes orbit {\n from { transform: rotate(0deg) translateX(64px) rotate(0deg); }\n to { transform: rotate(360deg) translateX(64px) rotate(-360deg); }\n }\n ")),z=()=>e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-200 overflow-hidden"},e.createElement("div",{className:"relative w-64 h-64"},[...Array(5)].map(((t,a)=>e.createElement("div",{key:a,className:"absolute top-0 left-1/2 w-0.5 bg-gray-400",style:{height:"45%",transformOrigin:"top",animation:"swing 1.5s ease-in-out infinite",animationDelay:.3*a+"s"}},e.createElement("div",{className:"absolute bottom-0 left-1/2 w-4 h-4 bg-indigo-500 rounded-full transform -translate-x-1/2"}))))),e.createElement("style",{jsx:!0},"\n @keyframes swing {\n 0%, 100% { transform: rotate(40deg); }\n 50% { transform: rotate(-40deg); }\n }\n ")),j=()=>e.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-900 overflow-hidden"},e.createElement("div",{className:"text-3xl text-emerald-400 font-mono"},"Loading...".split("").map(((t,a)=>e.createElement("span",{key:a,style:{animation:"typewriter 2s steps(1) infinite",animationDelay:.1*a+"s",opacity:0}},t)))),e.createElement("style",{jsx:!0},"\n @keyframes typewriter {\n 0%, 100% { opacity: 0; }\n 50% { opacity: 1; }\n }\n ")),M=({size:t=24,color:a="blue-500"})=>e.createElement("div",{className:`inline-flex items-center justify-center w-${t} h-${t}`},e.createElement("div",{className:`w-full h-full rounded-full bg-${a} opacity-75`,style:{animation:"minipulse 1.2s ease-in-out infinite"}}),e.createElement("style",{jsx:!0},"\n @keyframes minipulse {\n 0%, 100% { transform: scale(0); opacity: 0.75; }\n 50% { transform: scale(1); opacity: 0.25; }\n }\n ")),C=({size:t=24,color:a="blue-500"})=>e.createElement("div",{className:`inline-flex space-x-1 w-${t}`},[0,1,2].map((r=>e.createElement("div",{key:r,className:`w-${t/4} h-${t/4} rounded-full bg-${a}`,style:{animation:`minidotbounce 0.6s ease-in-out ${.1*r}s infinite alternate`}}))),e.createElement("style",{jsx:!0},`\n @keyframes minidotbounce {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-${t/4}px); }\n }\n `)),A=({size:t=24,color:a="blue-500",thickness:r=2})=>e.createElement("div",{className:`inline-block w-${t} h-${t}`},e.createElement("div",{className:`w-full h-full rounded-full border-${r} border-${a} border-t-transparent`,style:{animation:"minispin 0.8s linear infinite"}}),e.createElement("style",{jsx:!0},"\n @keyframes minispin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ")),Y=({size:t=24,frontColor:a="blue-500",backColor:r="blue-300"})=>e.createElement("div",{className:`inline-block w-${t} h-${t}`},e.createElement("div",{className:"relative w-full h-full",style:{transformStyle:"preserve-3d",animation:"miniflip 1.2s infinite"}},e.createElement("div",{className:`absolute w-full h-full bg-${a} rounded`}),e.createElement("div",{className:`absolute w-full h-full bg-${r} rounded`,style:{transform:"rotateY(180deg)"}})),e.createElement("style",{jsx:!0},"\n @keyframes miniflip {\n 0%, 100% { transform: rotateY(0deg); }\n 50% { transform: rotateY(180deg); }\n }\n ")),D=({size:t=24,color:a="blue-500"})=>e.createElement("div",{className:`inline-block w-${t} h-${t}`},e.createElement("div",{className:`w-full h-full bg-${a}`,style:{clipPath:"polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%)",animation:"minihourglass 1s ease-in-out infinite"}}),e.createElement("style",{jsx:!0},"\n @keyframes minihourglass {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(180deg); }\n }\n ")),S=({size:t=24,color:a="blue-500"})=>e.createElement("div",{className:`inline-block relative w-${t} h-${t}`},[0,1,2].map((t=>e.createElement("div",{key:t,className:`absolute top-0 left-0 w-full h-full rounded-full border border-${a}`,style:{animation:`miniripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) ${.5*t}s infinite`}}))),e.createElement("style",{jsx:!0},"\n @keyframes miniripple {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n }\n "));export{d as AtomLoader,E as BinaryLoader,h as BouncingDotsLoader,N as BubbleLoader,b as ClockLoader,k as CloudLoader,g as CosmicLoader,p as DNALoader,f as GalaxyLoader,x as ImageSpinLoader,C as MiniDotsLoader,Y as MiniFlipLoader,D as MiniHourglassLoader,M as MiniPulseLoader,S as MiniRippleLoader,A as MiniSpinnerLoader,$ as MoleculeLoader,z as PendulumLoader,u as PulseGridLoader,y as RotatingSquaresLoader,v as ShoppingLoader,j as TypewriterLoader,w as WaveLoader};
//# sourceMappingURL=index.es.js.map