vibrant-loaders
Version:
A collection of unique orange-themed loaders for shopping websites
3 lines (2 loc) • 35.3 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("lucide-react");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e);!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)}');exports.AtomLoader=({size:e=16,coreColor:t="orange-500",electronColor:a="orange-300",ringColor:n="orange-400",backgroundColor:o="orange-50"})=>r.default.createElement("div",{className:`vl-atom-loader vl-bg-${o}`},r.default.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: ${e}px;\n height: ${e}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: ${e/4}px;\n height: ${e/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*e}px;\n height: ${1.5*e}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 `),r.default.createElement("div",{className:"vl-atom-container",style:{"--vl-core-color":`var(--vl-${t}, orange)`,"--vl-electron-color":`var(--vl-${a}, yellow)`,"--vl-ring-color":`var(--vl-${n}, red)`}},r.default.createElement("div",{className:"vl-atom-core"}),[...Array(3)].map(((t,a)=>r.default.createElement("div",{key:a,className:"vl-atom-electron",style:{top:"50%",left:"50%",transform:`translate(-50%, -50%) rotate(${120*a}deg) translateX(${e/2}px)`,animation:"vl-orbit 1s linear infinite",animationDelay:.33*a+"s"}}))),[...Array(3)].map(((e,t)=>r.default.createElement("div",{key:t,className:"vl-atom-ring",style:{animationDelay:.5*t+"s"}}))))),exports.BinaryLoader=()=>r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-900 overflow-hidden"},r.default.createElement("div",{className:"grid grid-cols-10 gap-1"},[...Array(100)].map(((e,t)=>r.default.createElement("div",{key:t,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")))),r.default.createElement("style",{jsx:!0},"\n @keyframes binaryFlash {\n 0%, 100% { color: #4a5568; }\n 50% { color: #48bb78; }\n }\n ")),exports.BouncingDotsLoader=({size:e=80,dotSize:t=16,dotColors:a=["red-500","blue-500","green-500"],backgroundColor:n="gray-100"})=>r.default.createElement("div",{className:`flex items-center justify-center h-screen bg-${n}`},r.default.createElement("div",{className:`flex space-x-4 w-${e}`},a.map(((e,a)=>r.default.createElement("div",{key:a,className:`w-${t} h-${t} bg-${e} rounded-full`,style:{animation:`bounce 0.6s ease-in-out ${.1*a}s infinite alternate`}})))),r.default.createElement("style",{jsx:!0},"\n @keyframes bounce {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-20px); }\n }\n ")),exports.BubbleLoader=()=>r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-purple-100 overflow-hidden"},r.default.createElement("div",{className:"relative w-64 h-64"},[...Array(15)].map(((e,t)=>r.default.createElement("div",{key:t,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`}})))),r.default.createElement("style",{jsx:!0},"\n @keyframes float {\n from { transform: translateY(0) scale(1); }\n to { transform: translateY(-15px) scale(1.05); }\n }\n ")),exports.ClockLoader=({size:e=200})=>r.default.createElement("div",{className:"flex items-center justify-center h-screen bg-gray-100"},r.default.createElement("div",{className:"relative rounded-full bg-white shadow-xl",style:{width:e,height:e}},[...Array(12)].map(((e,t)=>r.default.createElement("div",{key:t,className:"absolute w-1 h-3 bg-gray-400",style:{top:"10%",left:"50%",transform:`rotate(${30*t}deg) translateX(-50%)`,transformOrigin:"50% 450%"}}))),r.default.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"}}),r.default.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"}}),r.default.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"}}),r.default.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"})),r.default.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 ")),exports.CloudLoader=({type:e="upload",progress:a=0})=>{const n="upload"===e;return r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-100 to-indigo-200"},r.default.createElement("div",{className:"relative flex flex-col items-center"},r.default.createElement("div",{className:"relative"},r.default.createElement(t.Cloud,{size:80,className:"text-indigo-500"}),n?r.default.createElement(t.ArrowUp,{size:40,className:"text-green-500 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce"}):r.default.createElement(t.ArrowDown,{size:40,className:"text-green-500 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce"})),r.default.createElement("div",{className:"mt-4 w-56 h-2 bg-indigo-200 rounded-full overflow-hidden"},r.default.createElement("div",{className:"h-full bg-indigo-500 transition-all duration-300 ease-out",style:{width:`${a}%`}})),r.default.createElement("div",{className:"mt-2 text-indigo-600 text-base font-semibold"},n?"Uploading":"Downloading",": ",a,"%")))},exports.CosmicLoader=({size:e=200})=>r.default.createElement("div",{className:"flex items-center justify-center h-screen bg-gradient-to-br from-indigo-900 to-purple-900"},r.default.createElement("div",{className:"relative",style:{width:e,height:e}},r.default.createElement("div",{className:"absolute inset-0 flex items-center justify-center"},r.default.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(((e,t)=>r.default.createElement("div",{key:t,className:"absolute w-full h-full animate-spin",style:{animationDuration:5*(t+2)+"s"}},r.default.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*t+"%",transform:"translate(-50%, -50%)",boxShadow:`0 0 15px 5px rgba(255, 165, 0, 0.${5+t})`}})))),[...Array(50)].map(((e,t)=>r.default.createElement("div",{key:t,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"}}))),r.default.createElement("div",{className:"absolute inset-0 border-4 border-purple-400 rounded-full animate-spin",style:{animationDuration:"20s"}}),[...Array(3)].map(((e,t)=>r.default.createElement("div",{key:t,className:"absolute inset-0 border-2 border-purple-300 rounded-full animate-ping opacity-0",style:{animationDelay:.5*t+"s",animationDuration:"3s"}}))))),exports.DNALoader=({size:e=40})=>{const t=["blue-400","green-400","yellow-400","red-400"],a="gray-300";return r.default.createElement("div",{className:"inline-flex items-center justify-center"},r.default.createElement("div",{className:"relative",style:{width:e,height:1.5*e,overflow:"hidden"}},[...Array(10)].map(((e,a)=>r.default.createElement("div",{key:a,className:"absolute w-full"},r.default.createElement("div",{className:`w-2 h-2 rounded-full bg-${t[a%4]} absolute`,style:{left:40*Math.sin(a/5*Math.PI)+50+"%",top:10*a+"%",transform:"translate(-50%, -50%)",animation:`dnaMove 3s ease-in-out ${.1*a}s infinite alternate`}}),r.default.createElement("div",{className:`w-2 h-2 rounded-full bg-${t[(a+2)%4]} absolute`,style:{right:40*Math.sin(a/5*Math.PI)+50+"%",top:10*a+"%",transform:"translate(50%, -50%)",animation:`dnaMove 3s ease-in-out ${.1*a}s infinite alternate-reverse`}})))),r.default.createElement("div",{className:`absolute left-1/2 top-0 w-0.5 h-full bg-${a} transform -translate-x-1/2`}),r.default.createElement("div",{className:`absolute right-1/2 top-0 w-0.5 h-full bg-${a} transform translate-x-1/2`})),r.default.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 "))},exports.GalaxyLoader=({size:e=200})=>r.default.createElement("div",{className:"flex items-center justify-center h-screen bg-gray-900"},r.default.createElement("div",{className:"relative animate-spin-slow",style:{width:e,height:e}},[...Array(4)].map(((e,t)=>r.default.createElement("div",{key:t,className:"absolute w-full h-full bg-purple-500 opacity-20",style:{transform:`rotate(${45*t}deg)`,borderRadius:"40% 60% 60% 40% / 60% 30% 70% 40%"}}))),r.default.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(((e,t)=>r.default.createElement("div",{key:t,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"][t%3],opacity:.8*Math.random()+.2,animation:`twinkle ${3*Math.random()+2}s infinite alternate`}})))),r.default.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 ")),exports.ImageSpinLoader=({imageSrc:a,size:n=40,spinDuration:o=1.5})=>{const[i,l]=e.useState(!1),[s,d]=e.useState(!1);e.useEffect((()=>{if(a){const e=new Image;e.onload=()=>l(!0),e.onerror=()=>d(!0),e.src=a}}),[a]);return r.default.createElement("div",{className:"inline-flex items-center justify-center"},r.default.createElement("div",{className:"relative",style:{animation:`spin ${o}s linear infinite`}},!a||s?r.default.createElement(t.Loader,{size:n,className:"text-blue-600 animate-spin"}):i?r.default.createElement("img",{src:a,alt:"Loading",className:"rounded-full object-cover",style:{width:n,height:n}}):r.default.createElement("div",{className:"bg-gray-200 rounded-full animate-pulse",style:{width:n,height:n}})),r.default.createElement("style",{jsx:!0},"\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n "))},exports.MiniDotsLoader=({size:e=24,color:t="blue-500"})=>r.default.createElement("div",{className:`inline-flex space-x-1 w-${e}`},[0,1,2].map((a=>r.default.createElement("div",{key:a,className:`w-${e/4} h-${e/4} rounded-full bg-${t}`,style:{animation:`minidotbounce 0.6s ease-in-out ${.1*a}s infinite alternate`}}))),r.default.createElement("style",{jsx:!0},`\n @keyframes minidotbounce {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(-${e/4}px); }\n }\n `)),exports.MiniFlipLoader=({size:e=24,frontColor:t="blue-500",backColor:a="blue-300"})=>r.default.createElement("div",{className:`inline-block w-${e} h-${e}`},r.default.createElement("div",{className:"relative w-full h-full",style:{transformStyle:"preserve-3d",animation:"miniflip 1.2s infinite"}},r.default.createElement("div",{className:`absolute w-full h-full bg-${t} rounded`}),r.default.createElement("div",{className:`absolute w-full h-full bg-${a} rounded`,style:{transform:"rotateY(180deg)"}})),r.default.createElement("style",{jsx:!0},"\n @keyframes miniflip {\n 0%, 100% { transform: rotateY(0deg); }\n 50% { transform: rotateY(180deg); }\n }\n ")),exports.MiniHourglassLoader=({size:e=24,color:t="blue-500"})=>r.default.createElement("div",{className:`inline-block w-${e} h-${e}`},r.default.createElement("div",{className:`w-full h-full bg-${t}`,style:{clipPath:"polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%)",animation:"minihourglass 1s ease-in-out infinite"}}),r.default.createElement("style",{jsx:!0},"\n @keyframes minihourglass {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(180deg); }\n }\n ")),exports.MiniPulseLoader=({size:e=24,color:t="blue-500"})=>r.default.createElement("div",{className:`inline-flex items-center justify-center w-${e} h-${e}`},r.default.createElement("div",{className:`w-full h-full rounded-full bg-${t} opacity-75`,style:{animation:"minipulse 1.2s ease-in-out infinite"}}),r.default.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 ")),exports.MiniRippleLoader=({size:e=24,color:t="blue-500"})=>r.default.createElement("div",{className:`inline-block relative w-${e} h-${e}`},[0,1,2].map((e=>r.default.createElement("div",{key:e,className:`absolute top-0 left-0 w-full h-full rounded-full border border-${t}`,style:{animation:`miniripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) ${.5*e}s infinite`}}))),r.default.createElement("style",{jsx:!0},"\n @keyframes miniripple {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(1); opacity: 0; }\n }\n ")),exports.MiniSpinnerLoader=({size:e=24,color:t="blue-500",thickness:a=2})=>r.default.createElement("div",{className:`inline-block w-${e} h-${e}`},r.default.createElement("div",{className:`w-full h-full rounded-full border-${a} border-${t} border-t-transparent`,style:{animation:"minispin 0.8s linear infinite"}}),r.default.createElement("style",{jsx:!0},"\n @keyframes minispin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ")),exports.MoleculeLoader=()=>r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-100 overflow-hidden"},r.default.createElement("div",{className:"relative w-64 h-64"},[...Array(5)].map(((e,t)=>r.default.createElement("div",{key:t,className:"absolute w-3 h-3 bg-teal-500 rounded-full",style:{top:50+35*Math.sin(2*t*Math.PI/5)+"%",left:50+35*Math.cos(2*t*Math.PI/5)+"%",animation:`orbit ${3+t}s linear infinite`}},r.default.createElement("div",{className:"w-full h-full bg-teal-300 rounded-full animate-ping"})))),r.default.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"},r.default.createElement("div",{className:"w-full h-full bg-pink-300 rounded-full animate-ping"}))),r.default.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 ")),exports.PendulumLoader=()=>r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-200 overflow-hidden"},r.default.createElement("div",{className:"relative w-64 h-64"},[...Array(5)].map(((e,t)=>r.default.createElement("div",{key:t,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*t+"s"}},r.default.createElement("div",{className:"absolute bottom-0 left-1/2 w-4 h-4 bg-indigo-500 rounded-full transform -translate-x-1/2"}))))),r.default.createElement("style",{jsx:!0},"\n @keyframes swing {\n 0%, 100% { transform: rotate(40deg); }\n 50% { transform: rotate(-40deg); }\n }\n ")),exports.PulseGridLoader=({size:e=200,gridSize:t=3})=>r.default.createElement("div",{className:"flex items-center justify-center h-screen bg-purple-100"},r.default.createElement("div",{className:"grid gap-4",style:{width:e,height:e,gridTemplateColumns:`repeat(${t}, 1fr)`}},[...Array(t*t)].map(((e,t)=>r.default.createElement("div",{key:t,className:"relative flex items-center justify-center"},r.default.createElement("div",{className:"w-1/2 h-1/2 bg-purple-500 rounded-full"}),r.default.createElement("div",{className:"absolute w-full h-full bg-purple-300 rounded-full opacity-0",style:{animation:`pulse 1.5s ease-in-out ${.1*t}s infinite`}}))))),r.default.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 ")),exports.RotatingSquaresLoader=({size:e=40,squareColors:t=["red-500","blue-500","green-500","yellow-500"]})=>r.default.createElement("div",{className:"inline-flex items-center justify-center"},r.default.createElement("div",{className:"relative",style:{width:e,height:e}},t.map(((e,t)=>r.default.createElement("div",{key:t,className:`absolute w-1/2 h-1/2 bg-${e}`,style:{top:t<2?"0":"50%",left:t%2==0?"0":"50%",transformOrigin:0===t?"100% 100%":1===t?"0% 100%":2===t?"100% 0%":"0% 0%",animation:`rotate-${["tl","tr","bl","br"][t]} 2s ease-in-out infinite`}})))),r.default.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 ")),exports.ShoppingLoader=({size:e=80,color:a="blue"})=>r.default.createElement("div",{className:"inline-flex items-center justify-center"},r.default.createElement("div",{className:"relative bg-gray-100 rounded-lg overflow-hidden",style:{width:e,height:e}},r.default.createElement("div",{className:"absolute inset-0 flex items-center"},r.default.createElement("div",{className:"animate-cartMove",style:{animationDuration:"3s"}},r.default.createElement(t.ShoppingCart,{size:.4*e,className:`text-${a}-600`}))),[t.Package,t.CreditCard,t.Check].map(((t,n)=>r.default.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}},r.default.createElement(t,{size:.25*e,className:`text-${a}-${400+100*n}`})))),r.default.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"}})),r.default.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 ")),exports.TypewriterLoader=()=>r.default.createElement("div",{className:"fixed inset-0 flex items-center justify-center bg-gray-900 overflow-hidden"},r.default.createElement("div",{className:"text-3xl text-emerald-400 font-mono"},"Loading...".split("").map(((e,t)=>r.default.createElement("span",{key:t,style:{animation:"typewriter 2s steps(1) infinite",animationDelay:.1*t+"s",opacity:0}},e)))),r.default.createElement("style",{jsx:!0},"\n @keyframes typewriter {\n 0%, 100% { opacity: 0; }\n 50% { opacity: 1; }\n }\n ")),exports.WaveLoader=({size:e=200})=>r.default.createElement("div",{className:"flex items-center justify-center h-screen bg-blue-100"},r.default.createElement("div",{className:"relative",style:{width:e,height:e/2,overflow:"hidden"}},[...Array(5)].map(((e,t)=>r.default.createElement("div",{key:t,className:"absolute w-full h-full bg-blue-400 opacity-20",style:{animation:`wave ${3+.5*t}s ease-in-out ${.2*t}s infinite alternate`,borderRadius:"40% 60% 60% 40% / 60% 60% 40% 40%"}}))),[...Array(30)].map(((e,t)=>r.default.createElement("div",{key:t,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`}})))),r.default.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 "));
//# sourceMappingURL=index.js.map