File size: 3,621 Bytes
e927672 | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | /* Loader.css — Ultra Neon Boot */
.loader {
position:fixed; inset:0;
background: #020008;
display:flex; align-items:center; justify-content:center;
z-index:9999;
overflow:hidden;
}
.loader-scan {
position:absolute; inset:0;
background: linear-gradient(180deg, transparent 0%, rgba(0,255,238,0.04) 50%, transparent 100%);
animation: scanLine 2s linear infinite;
}
@keyframes scanLine {
from { transform:translateY(-100%); }
to { transform:translateY(100vh); }
}
.loader-grid {
position:absolute; inset:0;
background-image:
linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
background-size:60px 60px;
animation: gridPulse 2s ease-in-out infinite alternate;
}
@keyframes gridPulse {
from { opacity:0.5; }
to { opacity:1; }
}
.loader-inner {
display:flex; flex-direction:column; align-items:center; gap:24px;
position:relative; z-index:1;
animation: loaderIn 0.6s cubic-bezier(0.19,1,0.22,1) forwards;
}
@keyframes loaderIn {
from { opacity:0; transform:translateY(30px) scale(0.9); }
to { opacity:1; transform:none; }
}
.loader-logo {
width:90px; height:90px;
border-radius:28px;
background: linear-gradient(135deg, #7c3aed, #06b6d4, #10b981);
background-size: 200% 200%;
display:flex; align-items:center; justify-content:center;
animation: logoSpin 3s ease-in-out infinite, gradFlow 3s ease infinite;
box-shadow: 0 0 40px rgba(124,58,237,0.8), 0 0 80px rgba(0,255,238,0.3);
position:relative;
}
@keyframes logoSpin {
0%,100% { border-radius:28px; transform:rotate(0deg); }
25% { border-radius:50%; transform:rotate(5deg); }
75% { border-radius:20px; transform:rotate(-5deg); }
}
@keyframes gradFlow {
0% { background-position:0% 50%; }
50% { background-position:100% 50%; }
100%{ background-position:0% 50%; }
}
.loader-logo::before {
content:'';
position:absolute; inset:-3px;
border-radius:inherit;
background: linear-gradient(135deg, #00ffee, #bf00ff, #ff0080, #00ffee);
background-size:300% 300%;
border-radius:30px;
z-index:-1;
animation: borderSpin 2s linear infinite;
padding:3px;
}
@keyframes borderSpin {
0% { background-position:0% 50%; }
100%{ background-position:200% 50%; }
}
.loader-logo span {
font-family:'Orbitron',monospace; font-size:42px; font-weight:900; color:#fff;
text-shadow: 0 0 20px rgba(255,255,255,0.8);
z-index:1;
}
.loader-name {
font-family:'Orbitron',monospace; font-size:11px; font-weight:700;
letter-spacing:0.6em; color:rgba(0,255,238,0.7);
text-shadow:0 0 20px rgba(0,255,238,0.5);
animation: namePulse 1.5s ease-in-out infinite alternate;
}
@keyframes namePulse {
from { opacity:0.5; letter-spacing:0.5em; }
to { opacity:1; letter-spacing:0.7em; }
}
.loader-bar-wrap {
width:220px; height:3px;
background:rgba(255,255,255,0.06);
border-radius:3px; overflow:hidden;
box-shadow: 0 0 10px rgba(124,58,237,0.3);
}
.loader-bar {
height:100%;
background: linear-gradient(90deg, #7c3aed, #00ffee, #bf00ff);
background-size:200% 100%;
border-radius:3px;
transition:width 0.1s linear;
animation:barGlow 1s ease-in-out infinite alternate;
box-shadow:0 0 8px rgba(0,255,238,0.6);
}
@keyframes barGlow {
from { box-shadow:0 0 8px rgba(0,255,238,0.4); }
to { box-shadow:0 0 16px rgba(0,255,238,0.9), 0 0 30px rgba(0,255,238,0.4); }
}
.loader-text {
font-family:'Rajdhani',sans-serif; font-size:12px;
color:rgba(255,255,255,0.3); letter-spacing:0.15em;
animation: textBlink 1.2s step-end infinite;
}
@keyframes textBlink { 50% { opacity:0.2; } } |