Eon Infinity Loader

1<script>
2  export let label = "Loading";
3  export let size = 126;
4  export let speed = 1;
5
6  $: cycle = 2.8 / speed;
7
8  const infinityPath =
9    "M 60 90 C 60 44, 116 44, 160 90 C 204 136, 260 136, 260 90 C 260 44, 204 44, 160 90 C 116 136, 60 136, 60 90";
10</script>
11
12<div
13  class="eon-loader"
14  style={`--loader-size: ${size}px; --cycle: ${cycle}s;`}
15  role="status"
16  aria-live="polite"
17  aria-label={label}
18>
19  <div class="eon-scene" aria-hidden="true">
20    <div class="eon-aura"></div>
21
22    <svg class="eon-svg" viewBox="0 0 320 180" aria-hidden="true">
23      <defs>
24        <linearGradient id="eonStroke" x1="0%" y1="0%" x2="100%" y2="0%">
25          <stop offset="0%" stop-color="#67e8f9" />
26          <stop offset="35%" stop-color="#22c55e" />
27          <stop offset="68%" stop-color="#60a5fa" />
28          <stop offset="100%" stop-color="#a78bfa" />
29        </linearGradient>
30
31        <linearGradient id="eonStrokeSoft" x1="0%" y1="0%" x2="100%" y2="0%">
32          <stop offset="0%" stop-color="#a5f3fc" />
33          <stop offset="45%" stop-color="#86efac" />
34          <stop offset="100%" stop-color="#c4b5fd" />
35        </linearGradient>
36
37        <filter id="eonGlow" x="-50%" y="-50%" width="200%" height="200%">
38          <feGaussianBlur stdDeviation="4.5" result="blur" />
39          <feMerge>
40            <feMergeNode in="blur" />
41            <feMergeNode in="SourceGraphic" />
42          </feMerge>
43        </filter>
44
45        <filter id="eonSoftGlow" x="-50%" y="-50%" width="200%" height="200%">
46          <feGaussianBlur stdDeviation="9" />
47        </filter>
48      </defs>
49
50      <path
51        d={infinityPath}
52        pathLength="1000"
53        class="track-base"
54      />
55
56      <path
57        d={infinityPath}
58        pathLength="1000"
59        class="track-secondary"
60      />
61
62      <path
63        d={infinityPath}
64        pathLength="1000"
65        class="trail trail-a"
66      />
67
68      <path
69        d={infinityPath}
70        pathLength="1000"
71        class="trail trail-b"
72      />
73
74      <g class="spark spark-a" filter="url(#eonGlow)">
75        <circle r="5.5" fill="#ecfeff" />
76        <circle r="10" fill="rgba(236,254,255,0.22)" filter="url(#eonSoftGlow)" />
77        <animateMotion
78          dur={`${cycle}s`}
79          repeatCount="indefinite"
80          calcMode="spline"
81          keyTimes="0;0.16;0.23;0.30;0.50;0.66;0.73;0.80;1"
82          keyPoints="0;0.11;0.19;0.26;0.50;0.74;0.81;0.89;1"
83          keySplines="
84            0.32 0 0.2 1;
85            0.18 0 0.2 1;
86            0.42 0 0.2 1;
87            0.38 0 0.2 1;
88            0.32 0 0.2 1;
89            0.18 0 0.2 1;
90            0.42 0 0.2 1;
91            0.38 0 0.2 1"
92        >
93          <mpath href="#eonPathRefA" />
94        </animateMotion>
95        <animate attributeName="opacity" values="0;1;1;0.88;1" keyTimes="0;0.08;0.55;0.8;1" dur={`${cycle}s`} repeatCount="indefinite" />
96      </g>
97
98      <g class="spark spark-b" filter="url(#eonGlow)">
99        <circle r="4.2" fill="#dbeafe" />
100        <circle r="8" fill="rgba(219,234,254,0.18)" filter="url(#eonSoftGlow)" />
101        <animateMotion
102          dur={`${cycle}s`}
103          repeatCount="indefinite"
104          begin={`${cycle * -0.5}s`}
105          calcMode="spline"
106          keyTimes="0;0.16;0.23;0.30;0.50;0.66;0.73;0.80;1"
107          keyPoints="0;0.11;0.19;0.26;0.50;0.74;0.81;0.89;1"
108          keySplines="
109            0.32 0 0.2 1;
110            0.18 0 0.2 1;
111            0.42 0 0.2 1;
112            0.38 0 0.2 1;
113            0.32 0 0.2 1;
114            0.18 0 0.2 1;
115            0.42 0 0.2 1;
116            0.38 0 0.2 1"
117        >
118          <mpath href="#eonPathRefB" />
119        </animateMotion>
120        <animate attributeName="opacity" values="0;0.9;0.9;0.75;0.9" keyTimes="0;0.08;0.55;0.8;1" dur={`${cycle}s`} begin={`${cycle * -0.5}s`} repeatCount="indefinite" />
121      </g>
122
123      <!-- hidden references for animateMotion -->
124      <path id="eonPathRefA" d={infinityPath} fill="none" />
125      <path id="eonPathRefB" d={infinityPath} fill="none" />
126
127      <circle class="core-pulse pulse-one" cx="160" cy="90" r="8" />
128      <circle class="core-pulse pulse-two" cx="160" cy="90" r="14" />
129    </svg>
130
131    <div class="eon-shimmer"></div>
132    <div class="eon-floor"></div>
133  </div>
134
135  <span class="eon-label">{label}</span>
136</div>
137
138<style>
139  .eon-loader {
140    --loader-size: 126px;
141    --cycle: 2.8s;
142
143    position: relative;
144    display: inline-flex;
145    flex-direction: column;
146    align-items: center;
147    justify-content: center;
148    gap: 18px;
149    padding: 34px 40px 30px;
150    min-width: calc(var(--loader-size) * 2.2);
151    border-radius: 34px;
152    color: #f8fafc;
153    background:
154      radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.12), transparent 28%),
155      radial-gradient(circle at 16% 82%, rgba(34, 197, 94, 0.15), transparent 34%),
156      radial-gradient(circle at 84% 80%, rgba(96, 165, 250, 0.16), transparent 36%),
157      linear-gradient(145deg, #050711 0%, #0b1020 56%, #020309 100%);
158    box-shadow:
159      0 28px 90px rgba(0, 0, 0, 0.62),
160      inset 0 1px 0 rgba(255, 255, 255, 0.12),
161      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
162    overflow: hidden;
163    isolation: isolate;
164  }
165
166  .eon-loader::before {
167    content: "";
168    position: absolute;
169    inset: -2px;
170    z-index: -2;
171    border-radius: inherit;
172    background:
173      conic-gradient(
174        from 200deg,
175        transparent,
176        rgba(34, 197, 94, 0.7),
177        rgba(96, 165, 250, 0.72),
178        rgba(167, 139, 250, 0.56),
179        transparent
180      );
181    opacity: 0.7;
182    animation: eon-border calc(var(--cycle) * 1.95) linear infinite;
183  }
184
185  .eon-loader::after {
186    content: "";
187    position: absolute;
188    inset: 1px;
189    z-index: -1;
190    border-radius: inherit;
191    background:
192      linear-gradient(145deg, rgba(5, 7, 17, 0.95), rgba(2, 3, 9, 0.98));
193  }
194
195  .eon-scene {
196    position: relative;
197    width: calc(var(--loader-size) * 1.82);
198    aspect-ratio: 320 / 180;
199    display: grid;
200    place-items: center;
201  }
202
203  .eon-aura {
204    position: absolute;
205    inset: 12% 16%;
206    border-radius: 999px;
207    background:
208      radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 48%),
209      radial-gradient(circle at 70% 38%, rgba(96, 165, 250, 0.24), transparent 38%),
210      radial-gradient(circle at 32% 68%, rgba(167, 139, 250, 0.2), transparent 40%);
211    filter: blur(18px);
212    opacity: 0.9;
213    animation: eon-aura calc(var(--cycle) * 1.7) ease-in-out infinite;
214  }
215
216  .eon-svg {
217    width: 100%;
218    height: 100%;
219    overflow: visible;
220  }
221
222  .track-base,
223  .track-secondary,
224  .trail {
225    fill: none;
226    stroke-linecap: round;
227    stroke-linejoin: round;
228  }
229
230  .track-base {
231    stroke: rgba(226, 232, 240, 0.12);
232    stroke-width: 13;
233  }
234
235  .track-secondary {
236    stroke: rgba(255, 255, 255, 0.05);
237    stroke-width: 7;
238  }
239
240  .trail {
241    stroke: url(#eonStroke);
242    filter: url(#eonGlow);
243    transform-origin: center;
244  }
245
246  .trail-a {
247    stroke-width: 8.5;
248    stroke-dasharray: 180 820;
249    animation: eon-trail-a var(--cycle) linear infinite;
250  }
251
252  .trail-b {
253    stroke: url(#eonStrokeSoft);
254    stroke-width: 5.5;
255    stroke-dasharray: 92 908;
256    opacity: 0.84;
257    animation: eon-trail-b var(--cycle) linear infinite;
258    animation-delay: calc(var(--cycle) * -0.5);
259  }
260
261  .spark {
262    opacity: 0.96;
263  }
264
265  .spark-b {
266    opacity: 0.82;
267  }
268
269  .core-pulse {
270    fill: none;
271    stroke: rgba(236, 254, 255, 0.5);
272    transform-origin: center;
273  }
274
275  .pulse-one {
276    stroke-width: 1.6;
277    animation: eon-core-one var(--cycle) ease-in-out infinite;
278  }
279
280  .pulse-two {
281    stroke-width: 1;
282    opacity: 0.62;
283    animation: eon-core-two var(--cycle) ease-in-out infinite;
284  }
285
286  .eon-shimmer {
287    position: absolute;
288    inset: 26% 33%;
289    border-radius: 999px;
290    background:
291      radial-gradient(circle, rgba(236, 254, 255, 0.16), transparent 58%);
292    filter: blur(10px);
293    opacity: 0.55;
294    animation: eon-shimmer calc(var(--cycle) * 1.2) ease-in-out infinite;
295    pointer-events: none;
296  }
297
298  .eon-floor {
299    position: absolute;
300    left: 50%;
301    bottom: 3%;
302    width: 44%;
303    height: 11%;
304    transform: translateX(-50%);
305    border-radius: 999px;
306    background: rgba(0, 0, 0, 0.62);
307    filter: blur(10px);
308    animation: eon-floor calc(var(--cycle) * 1.2) ease-in-out infinite;
309  }
310
311  .eon-label {
312    font: 750 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
313    letter-spacing: 0.18em;
314    text-transform: uppercase;
315    color: rgba(248, 250, 252, 0.76);
316    text-shadow:
317      0 0 18px rgba(34, 197, 94, 0.28),
318      0 0 28px rgba(96, 165, 250, 0.2);
319  }
320
321  @keyframes eon-border {
322    to {
323      transform: rotate(360deg);
324    }
325  }
326
327  @keyframes eon-aura {
328    0%, 100% {
329      transform: scale(0.94);
330      opacity: 0.62;
331    }
332
333    50% {
334      transform: scale(1.08);
335      opacity: 1;
336    }
337  }
338
339  @keyframes eon-trail-a {
340    0% {
341      stroke-dashoffset: 0;
342      opacity: 0.3;
343    }
344
345    16% {
346      stroke-dashoffset: -110;
347      opacity: 1;
348    }
349
350    23% {
351      stroke-dashoffset: -180;
352    }
353
354    30% {
355      stroke-dashoffset: -210;
356    }
357
358    50% {
359      stroke-dashoffset: -500;
360      opacity: 0.95;
361    }
362
363    66% {
364      stroke-dashoffset: -740;
365    }
366
367    73% {
368      stroke-dashoffset: -810;
369    }
370
371    80% {
372      stroke-dashoffset: -840;
373    }
374
375    100% {
376      stroke-dashoffset: -1000;
377      opacity: 0.3;
378    }
379  }
380
381  @keyframes eon-trail-b {
382    0% {
383      stroke-dashoffset: 0;
384      opacity: 0.18;
385    }
386
387    16% {
388      stroke-dashoffset: -80;
389      opacity: 0.76;
390    }
391
392    23% {
393      stroke-dashoffset: -132;
394    }
395
396    30% {
397      stroke-dashoffset: -150;
398    }
399
400    50% {
401      stroke-dashoffset: -460;
402      opacity: 0.68;
403    }
404
405    66% {
406      stroke-dashoffset: -700;
407    }
408
409    73% {
410      stroke-dashoffset: -752;
411    }
412
413    80% {
414      stroke-dashoffset: -770;
415    }
416
417    100% {
418      stroke-dashoffset: -1000;
419      opacity: 0.18;
420    }
421  }
422
423  @keyframes eon-core-one {
424    0%, 18%, 32%, 68%, 82%, 100% {
425      r: 8;
426      opacity: 0.08;
427    }
428
429    24%, 74% {
430      r: 16;
431      opacity: 0.9;
432    }
433
434    28%, 78% {
435      r: 24;
436      opacity: 0;
437    }
438  }
439
440  @keyframes eon-core-two {
441    0%, 16%, 34%, 66%, 84%, 100% {
442      r: 14;
443      opacity: 0;
444    }
445
446    24%, 74% {
447      r: 22;
448      opacity: 0.52;
449    }
450
451    28%, 78% {
452      r: 34;
453      opacity: 0;
454    }
455  }
456
457  @keyframes eon-shimmer {
458    0%, 100% {
459      transform: scale(0.88);
460      opacity: 0.2;
461    }
462
463    24%, 74% {
464      transform: scale(1.18);
465      opacity: 0.72;
466    }
467
468    36%, 86% {
469      transform: scale(0.96);
470      opacity: 0.16;
471    }
472  }
473
474  @keyframes eon-floor {
475    0%, 100% {
476      opacity: 0.3;
477      transform: translateX(-50%) scale(0.82);
478    }
479
480    24%, 74% {
481      opacity: 0.58;
482      transform: translateX(-50%) scale(1);
483    }
484
485    36%, 86% {
486      opacity: 0.34;
487      transform: translateX(-50%) scale(0.88);
488    }
489  }
490
491  @media (prefers-reduced-motion: reduce) {
492    .eon-loader::before,
493    .eon-aura,
494    .trail-a,
495    .trail-b,
496    .core-pulse,
497    .eon-shimmer,
498    .eon-floor {
499      animation: none !important;
500    }
501
502    .spark {
503      display: none;
504    }
505
506    .trail-a {
507      stroke-dasharray: 220 780;
508      stroke-dashoffset: -120;
509      opacity: 0.92;
510    }
511
512    .trail-b {
513      stroke-dasharray: 110 890;
514      stroke-dashoffset: -620;
515      opacity: 0.62;
516    }
517
518    .pulse-one,
519    .pulse-two {
520      opacity: 0;
521    }
522  }
523</style>