30 lines
919 B
TypeScript
30 lines
919 B
TypeScript
'use client';
|
|
const SQUARES = [0, 1, 2, 3];
|
|
const DELAYS = [0, 0.15, 0.15, 0.3];
|
|
|
|
export default function Loader({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{SQUARES.map((i) => (
|
|
<div
|
|
key={i}
|
|
className="h-3 w-3 rounded-sm bg-blue-500"
|
|
style={{
|
|
animation: `loaderPulse 1.2s ease-in-out ${DELAYS[i]}s infinite`,
|
|
opacity: 0.2,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
<span className="text-xs font-medium text-slate-400 tracking-wide">Cargando...</span>
|
|
<style>{`
|
|
@keyframes loaderPulse {
|
|
0%, 100% { opacity: 0.15; transform: scale(0.85); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|