1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Neon Loading</title>
7<style>
8 :root{
9 --pink:#ff1fbf;
10 --blue:#2ea7ff;
11 --bg:#0b0d10;
12 --panel-w:240px;
13 --panel-h:48px;
14 --dur:2.8s;
15 }
16
17 *{box-sizing:border-box}
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:
24 radial-gradient(circle at center,
25 #020304 0%,
26 #050608 18%,
27 #0a0c0f 34%,
28 #14161a 62%,
29 #23252a 100%);
30 font-family: Arial, Helvetica, sans-serif;
31 }
32
33 body{
34 display:grid;
35 place-items:center;
36 }
37
38 .stage{
39 position:relative;
40 width:100vw;
41 height:100vh;
42 display:grid;
43 place-items:center;
44 filter: saturate(1.05);
45 }
46
47 .loading{
48 position:relative;
49 width:var(--panel-w);
50 height:var(--panel-h);
51 display:grid;
52 place-items:center;
53 color:var(--pink);
54 font-size:18px;
55 letter-spacing:.5px;
56 text-transform:uppercase;
57 background:
58 linear-gradient(90deg,
59 rgba(255,255,255,.08) 0%,
60 rgba(255,255,255,.03) 18%,
61 rgba(255,255,255,.01) 50%,
62 rgba(255,255,255,.03) 82%,
63 rgba(255,255,255,.08) 100%);
64 border:2px solid transparent;
65 border-image:linear-gradient(90deg,var(--pink),var(--blue)) 1;
66 box-shadow:
67 0 0 8px rgba(255,31,191,.35),
68 0 0 18px rgba(255,31,191,.18),
69 0 0 26px rgba(46,167,255,.12);
70 animation: borderShift var(--dur) linear infinite,
71 glowPulse var(--dur) ease-in-out infinite;
72 }
73
74 .loading::before{
75 content:"";
76 position:absolute;
77 inset:-10px;
78 background:
79 linear-gradient(90deg,
80 rgba(255,31,191,.22),
81 rgba(46,167,255,.18));
82 filter: blur(12px);
83 opacity:.55;
84 z-index:-1;
85 animation: auraShift var(--dur) linear infinite,
86 auraPulse var(--dur) ease-in-out infinite;
87 }
88
89 .loading span{
90 position:relative;
91 z-index:1;
92 background:linear-gradient(90deg,var(--pink),var(--blue));
93 -webkit-background-clip:text;
94 background-clip:text;
95 color:transparent;
96 text-shadow:
97 0 0 8px rgba(255,31,191,.18),
98 0 0 10px rgba(46,167,255,.12);
99 animation: textShift var(--dur) linear infinite;
100 }
101
102 @keyframes borderShift{
103 0%{
104 border-image:linear-gradient(90deg,var(--pink),var(--blue)) 1;
105 }
106 25%{
107 border-image:linear-gradient(90deg,#d43cff,#3aa8ff) 1;
108 }
109 50%{
110 border-image:linear-gradient(90deg,#7b5cff,var(--blue)) 1;
111 }
112 75%{
113 border-image:linear-gradient(90deg,var(--blue),#d43cff) 1;
114 }
115 100%{
116 border-image:linear-gradient(90deg,var(--pink),var(--blue)) 1;
117 }
118 }
119
120 @keyframes textShift{
121 0%{
122 background:linear-gradient(90deg,var(--pink),#ff4fd0);
123 -webkit-background-clip:text;
124 background-clip:text;
125 }
126 35%{
127 background:linear-gradient(90deg,#c84cff,#7f63ff);
128 -webkit-background-clip:text;
129 background-clip:text;
130 }
131 60%{
132 background:linear-gradient(90deg,#5f7dff,var(--blue));
133 -webkit-background-clip:text;
134 background-clip:text;
135 }
136 80%{
137 background:linear-gradient(90deg,var(--blue),#8f5cff);
138 -webkit-background-clip:text;
139 background-clip:text;
140 }
141 100%{
142 background:linear-gradient(90deg,var(--pink),#ff4fd0);
143 -webkit-background-clip:text;
144 background-clip:text;
145 }
146 }
147
148 @keyframes auraShift{
149 0%{
150 background:linear-gradient(90deg,
151 rgba(255,31,191,.24),
152 rgba(46,167,255,.14));
153 }
154 50%{
155 background:linear-gradient(90deg,
156 rgba(46,167,255,.18),
157 rgba(255,31,191,.20));
158 }
159 100%{
160 background:linear-gradient(90deg,
161 rgba(255,31,191,.24),
162 rgba(46,167,255,.14));
163 }
164 }
165
166 @keyframes glowPulse{
167 0%,100%{
168 box-shadow:
169 0 0 8px rgba(255,31,191,.35),
170 0 0 18px rgba(255,31,191,.18),
171 0 0 26px rgba(46,167,255,.12);
172 transform:translateY(0) scale(1);
173 }
174 50%{
175 box-shadow:
176 0 0 10px rgba(46,167,255,.28),
177 0 0 20px rgba(46,167,255,.16),
178 0 0 28px rgba(255,31,191,.14);
179 transform:translateY(0) scale(1);
180 }
181 }
182
183 @keyframes auraPulse{
184 0%,100%{ opacity:.52; }
185 50%{ opacity:.42; }
186 }
187</style>
188</head>
189<body>
190 <div class="stage">
191 <div class="loading"><span>LOADING</span></div>
192 </div>
193</body>
194</html>