File size: 2,851 Bytes
b8e6434 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | "use client";
export default function BrandLoader() {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-navy/90 backdrop-blur-xl animate-in fade-in duration-500">
<div className="relative flex flex-col items-center">
{/* Outer Glowing Ring */}
<div className="absolute h-64 w-64 rounded-full border-2 border-cyan/20 animate-ping opacity-20" />
{/* Rotating Spiral / Radar */}
<div className="relative h-48 w-48">
{/* Main Ring */}
<div className="absolute inset-0 rounded-full border-[3px] border-t-cyan border-r-transparent border-b-sky/30 border-l-transparent animate-spin duration-[1.5s]" />
{/* Inner Fast Ring */}
<div className="absolute inset-4 rounded-full border border-dashed border-cyan/40 animate-spin-reverse duration-[3s]" />
{/* The "Mountain" Brand Shape (SVG) */}
<div className="absolute inset-0 flex items-center justify-center">
<svg width="60" height="60" viewBox="0 0 100 100" className="drop-shadow-[0_0_15px_rgba(6,182,212,0.8)]">
<path
d="M50 15 L90 85 L10 85 Z"
fill="none"
stroke="currentColor"
strokeWidth="4"
className="text-cyan animate-pulse"
/>
<path
d="M50 35 L75 85 L25 85 Z"
fill="none"
stroke="currentColor"
strokeWidth="3"
className="text-sky/60"
/>
</svg>
</div>
{/* Scanning Line */}
<div className="absolute inset-0 rounded-full bg-gradient-to-t from-cyan/20 to-transparent animate-pulse h-1/2 top-0 origin-bottom" />
</div>
{/* Text Status */}
<div className="mt-12 text-center space-y-2">
<h3 className="text-xl font-bold tracking-[0.2em] text-white uppercase italic">
Neural Syncing
</h3>
<div className="flex items-center gap-1 justify-center">
<span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-75" />
<span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-150" />
<span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-300" />
</div>
<p className="text-[10px] text-slate-500 uppercase tracking-widest mt-4">
Connecting to Mercado Público Real-Time API...
</p>
</div>
</div>
<style jsx>{`
@keyframes spin-reverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
.animate-spin-reverse {
animation: spin-reverse 3s linear infinite;
}
`}</style>
</div>
);
}
|