Nebula Core 3D Loader

1<script>
2  export let label = "Loading";
3  export let size = 96;
4  export let speed = 1.15;
5</script>
6
7<div
8  class="nebula-loader"
9  style:--loader-size={`${size}px`}
10  style:--loader-speed={`${speed}s`}
11  role="status"
12  aria-live="polite"
13  aria-label={label}
14>
15  <div class="nebula-stage" aria-hidden="true">
16    <div class="nebula-aura"></div>
17
18    <div class="nebula-orbit orbit-one">
19      <span></span>
20    </div>
21
22    <div class="nebula-orbit orbit-two">
23      <span></span>
24    </div>
25
26    <div class="nebula-orbit orbit-three">
27      <span></span>
28    </div>
29
30    <div class="nebula-cube">
31      <i class="face face-front"></i>
32      <i class="face face-back"></i>
33      <i class="face face-right"></i>
34      <i class="face face-left"></i>
35      <i class="face face-top"></i>
36      <i class="face face-bottom"></i>
37    </div>
38
39    <div class="nebula-shadow"></div>
40  </div>
41
42  <span class="nebula-label">{label}</span>
43</div>
44
45<style>
46  .nebula-loader {
47    --loader-size: 96px;
48    --loader-speed: 1.15s;
49    --cube-size: calc(var(--loader-size) * 0.38);
50
51    position: relative;
52    display: inline-flex;
53    flex-direction: column;
54    align-items: center;
55    justify-content: center;
56    gap: 18px;
57    padding: 28px;
58    min-width: calc(var(--loader-size) * 1.7);
59    border-radius: 32px;
60    color: #f8fafc;
61    background:
62      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 34%),
63      linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.98));
64    box-shadow:
65      0 24px 80px rgba(2, 6, 23, 0.55),
66      inset 0 1px 0 rgba(255, 255, 255, 0.12),
67      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
68    overflow: hidden;
69    isolation: isolate;
70  }
71
72  .nebula-loader::before {
73    content: "";
74    position: absolute;
75    inset: -45%;
76    z-index: -1;
77    background:
78      conic-gradient(
79        from 180deg,
80        transparent,
81        rgba(244, 114, 182, 0.18),
82        rgba(56, 189, 248, 0.18),
83        rgba(250, 204, 21, 0.12),
84        transparent
85      );
86    animation: nebula-bg-spin calc(var(--loader-speed) * 6) linear infinite;
87  }
88
89  .nebula-loader::after {
90    content: "";
91    position: absolute;
92    inset: 1px;
93    z-index: -1;
94    border-radius: inherit;
95    background:
96      linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.96));
97  }
98
99  .nebula-stage {
100    position: relative;
101    width: var(--loader-size);
102    height: var(--loader-size);
103    display: grid;
104    place-items: center;
105    perspective: 760px;
106    transform-style: preserve-3d;
107  }
108
109  .nebula-aura {
110    position: absolute;
111    width: 72%;
112    height: 72%;
113    border-radius: 999px;
114    background:
115      radial-gradient(circle, rgba(125, 211, 252, 0.5), transparent 58%),
116      radial-gradient(circle at 70% 30%, rgba(251, 113, 133, 0.48), transparent 42%);
117    filter: blur(12px);
118    opacity: 0.92;
119    animation: nebula-pulse calc(var(--loader-speed) * 1.7) ease-in-out infinite;
120  }
121
122  .nebula-orbit {
123    position: absolute;
124    width: 86%;
125    height: 86%;
126    border-radius: 999px;
127    border: 1px solid rgba(226, 232, 240, 0.16);
128    transform-style: preserve-3d;
129  }
130
131  .nebula-orbit span {
132    position: absolute;
133    top: 50%;
134    left: -4px;
135    width: 8px;
136    height: 8px;
137    border-radius: 999px;
138    background: #f8fafc;
139    box-shadow:
140      0 0 12px rgba(255, 255, 255, 0.95),
141      0 0 28px rgba(56, 189, 248, 0.85);
142  }
143
144  .orbit-one {
145    transform: rotateX(64deg) rotateZ(0deg);
146    animation: nebula-orbit-one var(--loader-speed) linear infinite;
147  }
148
149  .orbit-two {
150    width: 72%;
151    height: 72%;
152    transform: rotateY(68deg) rotateZ(35deg);
153    animation: nebula-orbit-two calc(var(--loader-speed) * 1.25) linear infinite reverse;
154  }
155
156  .orbit-two span {
157    background: #fda4af;
158    box-shadow:
159      0 0 12px rgba(253, 164, 175, 0.95),
160      0 0 28px rgba(244, 114, 182, 0.85);
161  }
162
163  .orbit-three {
164    width: 58%;
165    height: 58%;
166    transform: rotateX(72deg) rotateY(22deg);
167    animation: nebula-orbit-three calc(var(--loader-speed) * 0.9) linear infinite;
168  }
169
170  .orbit-three span {
171    background: #fde68a;
172    box-shadow:
173      0 0 12px rgba(253, 230, 138, 0.95),
174      0 0 28px rgba(250, 204, 21, 0.75);
175  }
176
177  .nebula-cube {
178    position: relative;
179    width: var(--cube-size);
180    height: var(--cube-size);
181    transform-style: preserve-3d;
182    animation: nebula-cube-spin calc(var(--loader-speed) * 2.4) cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
183  }
184
185  .face {
186    position: absolute;
187    inset: 0;
188    display: block;
189    border: 1px solid rgba(255, 255, 255, 0.28);
190    background:
191      linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05)),
192      linear-gradient(135deg, rgba(56, 189, 248, 0.36), rgba(244, 114, 182, 0.22));
193    box-shadow:
194      inset 0 0 18px rgba(255, 255, 255, 0.14),
195      0 0 22px rgba(56, 189, 248, 0.22);
196    backdrop-filter: blur(10px);
197  }
198
199  .face-front {
200    transform: translateZ(calc(var(--cube-size) / 2));
201  }
202
203  .face-back {
204    transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));
205  }
206
207  .face-right {
208    transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
209  }
210
211  .face-left {
212    transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
213  }
214
215  .face-top {
216    transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
217  }
218
219  .face-bottom {
220    transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));
221  }
222
223  .nebula-shadow {
224    position: absolute;
225    bottom: 7%;
226    width: 48%;
227    height: 12%;
228    border-radius: 999px;
229    background: rgba(15, 23, 42, 0.72);
230    filter: blur(7px);
231    transform: rotateX(72deg);
232    animation: nebula-shadow calc(var(--loader-speed) * 1.7) ease-in-out infinite;
233  }
234
235  .nebula-label {
236    font: 600 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
237    letter-spacing: 0.14em;
238    text-transform: uppercase;
239    color: rgba(248, 250, 252, 0.72);
240    text-shadow: 0 0 18px rgba(125, 211, 252, 0.35);
241  }
242
243  @keyframes nebula-bg-spin {
244    to {
245      transform: rotate(360deg);
246    }
247  }
248
249  @keyframes nebula-pulse {
250    0%,
251    100% {
252      transform: scale(0.86);
253      opacity: 0.66;
254    }
255
256    50% {
257      transform: scale(1.08);
258      opacity: 1;
259    }
260  }
261
262  @keyframes nebula-orbit-one {
263    to {
264      transform: rotateX(64deg) rotateZ(360deg);
265    }
266  }
267
268  @keyframes nebula-orbit-two {
269    to {
270      transform: rotateY(68deg) rotateZ(395deg);
271    }
272  }
273
274  @keyframes nebula-orbit-three {
275    to {
276      transform: rotateX(72deg) rotateY(22deg) rotateZ(360deg);
277    }
278  }
279
280  @keyframes nebula-cube-spin {
281    0% {
282      transform: rotateX(-18deg) rotateY(0deg) rotateZ(0deg);
283    }
284
285    50% {
286      transform: rotateX(156deg) rotateY(190deg) rotateZ(18deg);
287    }
288
289    100% {
290      transform: rotateX(342deg) rotateY(360deg) rotateZ(0deg);
291    }
292  }
293
294  @keyframes nebula-shadow {
295    0%,
296    100% {
297      transform: rotateX(72deg) scale(0.78);
298      opacity: 0.35;
299    }
300
301    50% {
302      transform: rotateX(72deg) scale(1);
303      opacity: 0.62;
304    }
305  }
306
307  @media (prefers-reduced-motion: reduce) {
308    .nebula-loader::before,
309    .nebula-aura,
310    .nebula-orbit,
311    .nebula-cube,
312    .nebula-shadow {
313      animation: none;
314    }
315
316    .nebula-cube {
317      transform: rotateX(-18deg) rotateY(38deg);
318    }
319  }
320</style>