Chrono Rift 3D Loader

1<script>
2  export let label = "Loading";
3  export let size = 112;
4  export let speed = 1.25;
5</script>
6
7<div
8  class="quantum-loader"
9  style={`--loader-size: ${size}px; --loader-speed: ${speed}s;`}
10  role="status"
11  aria-live="polite"
12  aria-label={label}
13>
14  <div class="quantum-scene" aria-hidden="true">
15    <div class="quantum-halo"></div>
16
17    <div class="quantum-ring ring-primary">
18      <span></span>
19    </div>
20
21    <div class="quantum-ring ring-secondary">
22      <span></span>
23    </div>
24
25    <div class="quantum-ring ring-tertiary">
26      <span></span>
27    </div>
28
29    <div class="quantum-prism">
30      <span class="face front"></span>
31      <span class="face back"></span>
32      <span class="face right"></span>
33      <span class="face left"></span>
34      <span class="face top"></span>
35      <span class="face bottom"></span>
36    </div>
37
38    <div class="quantum-core"></div>
39    <div class="quantum-floor"></div>
40  </div>
41
42  <span class="quantum-label">{label}</span>
43</div>
44
45<style>
46  .quantum-loader {
47    --loader-size: 112px;
48    --loader-speed: 1.25s;
49    --prism-size: calc(var(--loader-size) * 0.34);
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(--loader-size) * 1.95);
58    padding: 34px 38px 30px;
59    border-radius: 34px;
60    color: #f8fafc;
61    background:
62      radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.12), transparent 32%),
63      radial-gradient(circle at 50% 64%, rgba(20, 184, 166, 0.14), transparent 42%),
64      linear-gradient(145deg, #070812 0%, #0d1020 52%, #03040a 100%);
65    box-shadow:
66      0 30px 90px rgba(0, 0, 0, 0.62),
67      inset 0 1px 0 rgba(255, 255, 255, 0.13),
68      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
69    overflow: hidden;
70    isolation: isolate;
71  }
72
73  .quantum-loader::before {
74    content: "";
75    position: absolute;
76    inset: -2px;
77    z-index: -2;
78    border-radius: inherit;
79    background:
80      conic-gradient(
81        from 180deg,
82        transparent 0deg,
83        rgba(20, 184, 166, 0.75) 72deg,
84        rgba(59, 130, 246, 0.68) 150deg,
85        rgba(168, 85, 247, 0.6) 230deg,
86        transparent 360deg
87      );
88    animation: quantum-border calc(var(--loader-speed) * 5) linear infinite;
89  }
90
91  .quantum-loader::after {
92    content: "";
93    position: absolute;
94    inset: 1px;
95    z-index: -1;
96    border-radius: inherit;
97    background: linear-gradient(145deg, rgba(7, 8, 18, 0.94), rgba(3, 4, 10, 0.98));
98  }
99
100  .quantum-scene {
101    position: relative;
102    width: var(--loader-size);
103    height: var(--loader-size);
104    display: grid;
105    place-items: center;
106    perspective: 820px;
107    transform-style: preserve-3d;
108  }
109
110  .quantum-halo {
111    position: absolute;
112    width: 78%;
113    height: 78%;
114    border-radius: 999px;
115    background:
116      radial-gradient(circle, rgba(45, 212, 191, 0.48), transparent 46%),
117      radial-gradient(circle at 66% 34%, rgba(96, 165, 250, 0.42), transparent 42%),
118      radial-gradient(circle at 32% 72%, rgba(168, 85, 247, 0.3), transparent 44%);
119    filter: blur(15px);
120    opacity: 0.92;
121    animation: quantum-halo calc(var(--loader-speed) * 1.8) ease-in-out infinite;
122  }
123
124  .quantum-ring {
125    position: absolute;
126    border-radius: 999px;
127    transform-style: preserve-3d;
128    border: 1px solid rgba(226, 232, 240, 0.18);
129    box-shadow:
130      inset 0 0 20px rgba(255, 255, 255, 0.04),
131      0 0 22px rgba(45, 212, 191, 0.14);
132  }
133
134  .quantum-ring::before {
135    content: "";
136    position: absolute;
137    inset: -2px;
138    border-radius: inherit;
139    border: 2px solid transparent;
140    border-top-color: rgba(94, 234, 212, 0.95);
141    border-right-color: rgba(96, 165, 250, 0.62);
142    filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.72));
143  }
144
145  .quantum-ring span {
146    position: absolute;
147    top: 50%;
148    left: -4px;
149    width: 8px;
150    height: 8px;
151    border-radius: 999px;
152    background: #ccfbf1;
153    box-shadow:
154      0 0 12px rgba(204, 251, 241, 1),
155      0 0 28px rgba(45, 212, 191, 0.9);
156  }
157
158  .ring-primary {
159    width: 84%;
160    height: 84%;
161    transform: rotateX(68deg) rotateZ(0deg);
162    animation: quantum-ring-primary var(--loader-speed) linear infinite;
163  }
164
165  .ring-secondary {
166    width: 70%;
167    height: 70%;
168    transform: rotateY(70deg) rotateZ(32deg);
169    animation: quantum-ring-secondary calc(var(--loader-speed) * 1.18) linear infinite reverse;
170  }
171
172  .ring-secondary::before {
173    border-top-color: rgba(147, 197, 253, 0.95);
174    border-right-color: rgba(168, 85, 247, 0.62);
175    filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.72));
176  }
177
178  .ring-secondary span {
179    background: #dbeafe;
180    box-shadow:
181      0 0 12px rgba(219, 234, 254, 1),
182      0 0 28px rgba(96, 165, 250, 0.9);
183  }
184
185  .ring-tertiary {
186    width: 54%;
187    height: 54%;
188    transform: rotateX(35deg) rotateY(72deg) rotateZ(0deg);
189    animation: quantum-ring-tertiary calc(var(--loader-speed) * 0.92) linear infinite;
190  }
191
192  .ring-tertiary::before {
193    border-top-color: rgba(216, 180, 254, 0.92);
194    border-right-color: rgba(45, 212, 191, 0.54);
195    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.7));
196  }
197
198  .ring-tertiary span {
199    background: #f3e8ff;
200    box-shadow:
201      0 0 12px rgba(243, 232, 255, 1),
202      0 0 28px rgba(168, 85, 247, 0.84);
203  }
204
205  .quantum-prism {
206    position: relative;
207    width: var(--prism-size);
208    height: var(--prism-size);
209    transform-style: preserve-3d;
210    animation: quantum-prism-spin calc(var(--loader-speed) * 2.6) linear infinite;
211  }
212
213  .face {
214    position: absolute;
215    inset: 0;
216    display: block;
217    border: 1px solid rgba(255, 255, 255, 0.32);
218    background:
219      linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
220      linear-gradient(135deg, rgba(45, 212, 191, 0.34), rgba(96, 165, 250, 0.28), rgba(168, 85, 247, 0.22));
221    box-shadow:
222      inset 0 0 18px rgba(255, 255, 255, 0.16),
223      0 0 22px rgba(45, 212, 191, 0.24);
224    backdrop-filter: blur(12px);
225  }
226
227  .front {
228    transform: translateZ(calc(var(--prism-size) / 2));
229  }
230
231  .back {
232    transform: rotateY(180deg) translateZ(calc(var(--prism-size) / 2));
233  }
234
235  .right {
236    transform: rotateY(90deg) translateZ(calc(var(--prism-size) / 2));
237  }
238
239  .left {
240    transform: rotateY(-90deg) translateZ(calc(var(--prism-size) / 2));
241  }
242
243  .top {
244    transform: rotateX(90deg) translateZ(calc(var(--prism-size) / 2));
245  }
246
247  .bottom {
248    transform: rotateX(-90deg) translateZ(calc(var(--prism-size) / 2));
249  }
250
251  .quantum-core {
252    position: absolute;
253    width: 10px;
254    height: 10px;
255    border-radius: 999px;
256    background: #ecfeff;
257    box-shadow:
258      0 0 12px rgba(236, 254, 255, 1),
259      0 0 30px rgba(45, 212, 191, 0.9),
260      0 0 54px rgba(96, 165, 250, 0.62);
261    animation: quantum-core-pulse calc(var(--loader-speed) * 1.4) ease-in-out infinite;
262  }
263
264  .quantum-floor {
265    position: absolute;
266    bottom: 4%;
267    width: 58%;
268    height: 13%;
269    border-radius: 999px;
270    background: rgba(0, 0, 0, 0.64);
271    filter: blur(9px);
272    transform: rotateX(72deg);
273    animation: quantum-floor calc(var(--loader-speed) * 1.6) ease-in-out infinite;
274  }
275
276  .quantum-label {
277    font: 700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
278    letter-spacing: 0.18em;
279    text-transform: uppercase;
280    color: rgba(248, 250, 252, 0.76);
281    text-shadow:
282      0 0 18px rgba(45, 212, 191, 0.34),
283      0 0 28px rgba(96, 165, 250, 0.22);
284  }
285
286  @keyframes quantum-border {
287    to {
288      transform: rotate(360deg);
289    }
290  }
291
292  @keyframes quantum-halo {
293    0%,
294    100% {
295      transform: scale(0.88);
296      opacity: 0.68;
297    }
298
299    50% {
300      transform: scale(1.08);
301      opacity: 1;
302    }
303  }
304
305  @keyframes quantum-ring-primary {
306    to {
307      transform: rotateX(68deg) rotateZ(360deg);
308    }
309  }
310
311  @keyframes quantum-ring-secondary {
312    to {
313      transform: rotateY(70deg) rotateZ(392deg);
314    }
315  }
316
317  @keyframes quantum-ring-tertiary {
318    to {
319      transform: rotateX(35deg) rotateY(72deg) rotateZ(360deg);
320    }
321  }
322
323  @keyframes quantum-prism-spin {
324    0% {
325      transform: rotateX(-18deg) rotateY(32deg) rotateZ(0deg);
326    }
327
328    100% {
329      transform: rotateX(342deg) rotateY(392deg) rotateZ(360deg);
330    }
331  }
332
333  @keyframes quantum-core-pulse {
334    0%,
335    100% {
336      transform: scale(0.82);
337      opacity: 0.58;
338    }
339
340    50% {
341      transform: scale(1.12);
342      opacity: 1;
343    }
344  }
345
346  @keyframes quantum-floor {
347    0%,
348    100% {
349      opacity: 0.32;
350      transform: rotateX(72deg) scale(0.82);
351    }
352
353    50% {
354      opacity: 0.62;
355      transform: rotateX(72deg) scale(1);
356    }
357  }
358
359  @media (prefers-reduced-motion: reduce) {
360    .quantum-loader::before,
361    .quantum-halo,
362    .quantum-ring,
363    .quantum-prism,
364    .quantum-core,
365    .quantum-floor {
366      animation: none;
367    }
368
369    .ring-primary {
370      transform: rotateX(68deg) rotateZ(28deg);
371    }
372
373    .ring-secondary {
374      transform: rotateY(70deg) rotateZ(62deg);
375    }
376
377    .ring-tertiary {
378      transform: rotateX(35deg) rotateY(72deg) rotateZ(44deg);
379    }
380
381    .quantum-prism {
382      transform: rotateX(-18deg) rotateY(38deg) rotateZ(0deg);
383    }
384  }
385</style>