Signal Tunnel Loader

1<script>
2  export let label = "Loading";
3  export let size = 118;
4  export let speed = 1.25;
5</script>
6
7<div
8  class="signal-loader"
9  style={`--signal-size: ${size}px; --signal-speed: ${speed}s;`}
10  role="status"
11  aria-live="polite"
12  aria-label={label}
13>
14  <div class="signal-scene" aria-hidden="true">
15    <div class="signal-depth depth-one"></div>
16    <div class="signal-depth depth-two"></div>
17    <div class="signal-depth depth-three"></div>
18    <div class="signal-depth depth-four"></div>
19
20    <div class="signal-lane lane-one">
21      <span></span>
22      <span></span>
23      <span></span>
24    </div>
25
26    <div class="signal-lane lane-two">
27      <span></span>
28      <span></span>
29      <span></span>
30    </div>
31
32    <div class="signal-lane lane-three">
33      <span></span>
34      <span></span>
35      <span></span>
36    </div>
37
38    <div class="signal-sweep"></div>
39    <div class="signal-glow"></div>
40    <div class="signal-shadow"></div>
41  </div>
42
43  <span class="signal-label">{label}</span>
44</div>
45
46<style>
47  .signal-loader {
48    --signal-size: 118px;
49    --signal-speed: 1.25s;
50
51    position: relative;
52    display: inline-flex;
53    flex-direction: column;
54    align-items: center;
55    justify-content: center;
56    gap: 18px;
57    min-width: calc(var(--signal-size) * 2);
58    padding: 34px 38px 30px;
59    border-radius: 34px;
60    color: #f8fafc;
61    background:
62      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.12), transparent 30%),
63      radial-gradient(circle at 20% 84%, rgba(34, 197, 94, 0.14), transparent 34%),
64      radial-gradient(circle at 82% 80%, rgba(14, 165, 233, 0.16), transparent 36%),
65      linear-gradient(145deg, #050711 0%, #0c1020 54%, #02030a 100%);
66    box-shadow:
67      0 30px 90px rgba(0, 0, 0, 0.62),
68      inset 0 1px 0 rgba(255, 255, 255, 0.13),
69      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
70    overflow: hidden;
71    isolation: isolate;
72  }
73
74  .signal-loader::before {
75    content: "";
76    position: absolute;
77    inset: -2px;
78    z-index: -2;
79    border-radius: inherit;
80    background:
81      conic-gradient(
82        from 210deg,
83        transparent,
84        rgba(34, 197, 94, 0.78),
85        rgba(14, 165, 233, 0.72),
86        rgba(99, 102, 241, 0.58),
87        transparent
88      );
89    opacity: 0.72;
90    animation: signal-border calc(var(--signal-speed) * 5.5) linear infinite;
91  }
92
93  .signal-loader::after {
94    content: "";
95    position: absolute;
96    inset: 1px;
97    z-index: -1;
98    border-radius: inherit;
99    background:
100      linear-gradient(145deg, rgba(5, 7, 17, 0.95), rgba(2, 3, 10, 0.98));
101  }
102
103  .signal-scene {
104    position: relative;
105    width: var(--signal-size);
106    height: var(--signal-size);
107    display: grid;
108    place-items: center;
109    perspective: 900px;
110    transform-style: preserve-3d;
111  }
112
113  .signal-glow {
114    position: absolute;
115    width: 86%;
116    height: 86%;
117    border-radius: 999px;
118    background:
119      radial-gradient(circle, transparent 0 28%, rgba(34, 197, 94, 0.22) 36%, transparent 62%),
120      radial-gradient(circle at 70% 32%, rgba(14, 165, 233, 0.32), transparent 38%),
121      radial-gradient(circle at 28% 72%, rgba(99, 102, 241, 0.26), transparent 42%);
122    filter: blur(12px);
123    opacity: 0.95;
124    animation: signal-glow calc(var(--signal-speed) * 2) ease-in-out infinite;
125  }
126
127  .signal-depth {
128    position: absolute;
129    border-radius: 999px;
130    border: 1px solid rgba(226, 232, 240, 0.16);
131    background:
132      radial-gradient(circle, transparent 0 46%, rgba(255, 255, 255, 0.035) 47%, transparent 68%);
133    transform-style: preserve-3d;
134  }
135
136  .signal-depth::before {
137    content: "";
138    position: absolute;
139    inset: -2px;
140    border-radius: inherit;
141    background:
142      conic-gradient(
143        from 0deg,
144        transparent 0deg,
145        transparent 54deg,
146        rgba(134, 239, 172, 0.95) 78deg,
147        rgba(56, 189, 248, 0.65) 112deg,
148        transparent 150deg,
149        transparent 360deg
150      );
151    mask:
152      radial-gradient(circle, transparent 0 60%, #000 61% 68%, transparent 69%);
153    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
154  }
155
156  .depth-one {
157    width: 92%;
158    height: 92%;
159    transform: rotateX(68deg) translateZ(-26px) scale(1);
160    animation: signal-depth-one calc(var(--signal-speed) * 2.4) linear infinite;
161  }
162
163  .depth-two {
164    width: 74%;
165    height: 74%;
166    opacity: 0.9;
167    transform: rotateX(68deg) translateZ(-8px) scale(1);
168    animation: signal-depth-two calc(var(--signal-speed) * 2) linear infinite reverse;
169  }
170
171  .depth-three {
172    width: 56%;
173    height: 56%;
174    opacity: 0.82;
175    transform: rotateX(68deg) translateZ(14px) scale(1);
176    animation: signal-depth-three calc(var(--signal-speed) * 1.65) linear infinite;
177  }
178
179  .depth-four {
180    width: 38%;
181    height: 38%;
182    opacity: 0.7;
183    transform: rotateX(68deg) translateZ(32px) scale(1);
184    animation: signal-depth-four calc(var(--signal-speed) * 1.35) linear infinite reverse;
185  }
186
187  .signal-lane {
188    position: absolute;
189    width: 96%;
190    height: 12px;
191    transform-style: preserve-3d;
192  }
193
194  .signal-lane::before {
195    content: "";
196    position: absolute;
197    left: 8%;
198    right: 8%;
199    top: 50%;
200    height: 1px;
201    background:
202      linear-gradient(
203        90deg,
204        transparent,
205        rgba(148, 163, 184, 0.26),
206        rgba(226, 232, 240, 0.48),
207        rgba(148, 163, 184, 0.26),
208        transparent
209      );
210  }
211
212  .signal-lane span {
213    position: absolute;
214    top: 50%;
215    left: 8%;
216    width: 7px;
217    height: 7px;
218    border-radius: 999px;
219    background: #dcfce7;
220    box-shadow:
221      0 0 10px rgba(220, 252, 231, 1),
222      0 0 26px rgba(34, 197, 94, 0.9);
223    transform: translateY(-50%);
224    animation: signal-dot var(--signal-speed) cubic-bezier(0.45, 0, 0.2, 1) infinite;
225  }
226
227  .signal-lane span:nth-child(2) {
228    animation-delay: calc(var(--signal-speed) * -0.33);
229    opacity: 0.78;
230  }
231
232  .signal-lane span:nth-child(3) {
233    animation-delay: calc(var(--signal-speed) * -0.66);
234    opacity: 0.58;
235  }
236
237  .lane-one {
238    transform: rotateZ(-18deg) rotateX(64deg) translateZ(26px);
239  }
240
241  .lane-two {
242    transform: rotateZ(24deg) rotateX(64deg) translateZ(6px);
243  }
244
245  .lane-two span {
246    background: #e0f2fe;
247    box-shadow:
248      0 0 10px rgba(224, 242, 254, 1),
249      0 0 26px rgba(14, 165, 233, 0.9);
250    animation-duration: calc(var(--signal-speed) * 1.18);
251  }
252
253  .lane-three {
254    transform: rotateZ(90deg) rotateX(64deg) translateZ(-16px);
255    opacity: 0.86;
256  }
257
258  .lane-three span {
259    background: #e0e7ff;
260    box-shadow:
261      0 0 10px rgba(224, 231, 255, 1),
262      0 0 26px rgba(99, 102, 241, 0.86);
263    animation-duration: calc(var(--signal-speed) * 0.9);
264  }
265
266  .signal-sweep {
267    position: absolute;
268    width: 82%;
269    height: 82%;
270    border-radius: 999px;
271    background:
272      conic-gradient(
273        from 0deg,
274        transparent 0deg,
275        rgba(255, 255, 255, 0.08) 28deg,
276        rgba(134, 239, 172, 0.72) 44deg,
277        transparent 72deg,
278        transparent 360deg
279      );
280    mask: radial-gradient(circle, transparent 0 42%, #000 43% 48%, transparent 49%);
281    transform: rotateX(68deg);
282    filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.58));
283    animation: signal-sweep calc(var(--signal-speed) * 1.6) linear infinite;
284  }
285
286  .signal-shadow {
287    position: absolute;
288    bottom: 4%;
289    width: 62%;
290    height: 14%;
291    border-radius: 999px;
292    background: rgba(0, 0, 0, 0.64);
293    filter: blur(10px);
294    transform: rotateX(72deg);
295    animation: signal-shadow calc(var(--signal-speed) * 1.7) ease-in-out infinite;
296  }
297
298  .signal-label {
299    font: 750 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
300    letter-spacing: 0.18em;
301    text-transform: uppercase;
302    color: rgba(248, 250, 252, 0.76);
303    text-shadow:
304      0 0 18px rgba(34, 197, 94, 0.32),
305      0 0 28px rgba(14, 165, 233, 0.22);
306  }
307
308  @keyframes signal-border {
309    to {
310      transform: rotate(360deg);
311    }
312  }
313
314  @keyframes signal-glow {
315    0%,
316    100% {
317      transform: scale(0.9);
318      opacity: 0.68;
319    }
320
321    50% {
322      transform: scale(1.08);
323      opacity: 1;
324    }
325  }
326
327  @keyframes signal-depth-one {
328    to {
329      transform: rotateX(68deg) translateZ(-26px) scale(1) rotateZ(360deg);
330    }
331  }
332
333  @keyframes signal-depth-two {
334    to {
335      transform: rotateX(68deg) translateZ(-8px) scale(1) rotateZ(360deg);
336    }
337  }
338
339  @keyframes signal-depth-three {
340    to {
341      transform: rotateX(68deg) translateZ(14px) scale(1) rotateZ(360deg);
342    }
343  }
344
345  @keyframes signal-depth-four {
346    to {
347      transform: rotateX(68deg) translateZ(32px) scale(1) rotateZ(360deg);
348    }
349  }
350
351  @keyframes signal-dot {
352    0% {
353      left: 8%;
354      opacity: 0;
355      transform: translateY(-50%) scale(0.72);
356    }
357
358    12% {
359      opacity: 1;
360    }
361
362    70% {
363      opacity: 1;
364    }
365
366    100% {
367      left: 88%;
368      opacity: 0;
369      transform: translateY(-50%) scale(1.08);
370    }
371  }
372
373  @keyframes signal-sweep {
374    to {
375      transform: rotateX(68deg) rotateZ(360deg);
376    }
377  }
378
379  @keyframes signal-shadow {
380    0%,
381    100% {
382      opacity: 0.32;
383      transform: rotateX(72deg) scale(0.82);
384    }
385
386    50% {
387      opacity: 0.62;
388      transform: rotateX(72deg) scale(1);
389    }
390  }
391
392  @media (prefers-reduced-motion: reduce) {
393    .signal-loader::before,
394    .signal-glow,
395    .signal-depth,
396    .signal-lane span,
397    .signal-sweep,
398    .signal-shadow {
399      animation: none;
400    }
401
402    .depth-one {
403      transform: rotateX(68deg) translateZ(-26px) rotateZ(18deg);
404    }
405
406    .depth-two {
407      transform: rotateX(68deg) translateZ(-8px) rotateZ(54deg);
408    }
409
410    .depth-three {
411      transform: rotateX(68deg) translateZ(14px) rotateZ(90deg);
412    }
413
414    .depth-four {
415      transform: rotateX(68deg) translateZ(32px) rotateZ(126deg);
416    }
417  }
418</style>