Loader by VashonG

#e8e8e8

1.macbook {
2  width: 150px;
3  height: 96px;
4  position: absolute;
5  left: 50%;
6  top: 50%;
7  margin: -85px 0 0 -78px;
8  perspective: 500px;
9}
10
11.shadow {
12  position: absolute;
13  width: 60px;
14  height: 0px;
15  left: 40px;
16  top: 160px;
17  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
18  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
19  animation: shadow infinite 7s ease;
20}
21
22.inner {
23  z-index: 20;
24  position: absolute;
25  width: 150px;
26  height: 96px;
27  left: 0;
28  top: 0;
29  transform-style: preserve-3d;
30  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
31  animation: rotate infinite 7s ease;
32}
33
34.screen {
35  width: 150px;
36  height: 96px;
37  position: absolute;
38  left: 0;
39  bottom: 0;
40  border-radius: 7px;
41  background: #ddd;
42  transform-style: preserve-3d;
43  transform-origin: 50% 93px;
44  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
45  animation: lid-screen infinite 7s ease;
46  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
47  background-position: left bottom;
48  background-size: 300px 300px;
49  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
50}
51
52.screen .logo {
53  position: absolute;
54  width: 20px;
55  height: 24px;
56  left: 50%;
57  top: 50%;
58  margin: -12px 0 0 -10px;
59  transform: rotateY(180deg) translateZ(0.1px);
60}
61
62.screen .face-one {
63  width: 150px;
64  height: 96px;
65  position: absolute;
66  left: 0;
67  bottom: 0;
68  border-radius: 7px;
69  background: #d3d3d3;
70  transform: translateZ(2px);
71  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
72}
73
74.screen .face-one .camera {
75  width: 3px;
76  height: 3px;
77  border-radius: 100%;
78  background: #000;
79  position: absolute;
80  left: 50%;
81  top: 4px;
82  margin-left: -1.5px;
83}
84
85.screen .face-one .display {
86  width: 130px;
87  height: 74px;
88  margin: 10px;
89  background-color: #000;
90  background-size: 100% 100%;
91  border-radius: 1px;
92  position: relative;
93  box-shadow: inset 0 0 2px rgba(0,0,0,1);
94}
95
96.screen .face-one .display .shade {
97  position: absolute;
98  left: 0;
99  top: 0;
100  width: 130px;
101  height: 74px;
102  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
103  animation: screen-shade infinite 7s ease;
104  background-size: 300px 200px;
105  background-position: 0px 0px;
106}
107
108.screen .face-one span {
109  position: absolute;
110  top: 85px;
111  left: 57px;
112  font-size: 6px;
113  color: #666
114}
115
116.macbody {
117  width: 150px;
118  height: 96px;
119  position: absolute;
120  left: 0;
121  bottom: 0;
122  border-radius: 7px;
123  background: #cbcbcb;
124  transform-style: preserve-3d;
125  transform-origin: 50% bottom;
126  transform: rotateX(-90deg);
127  animation: lid-macbody infinite 7s ease;
128  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
129}
130
131.macbody .face-one {
132  width: 150px;
133  height: 96px;
134  position: absolute;
135  left: 0;
136  bottom: 0;
137  border-radius: 7px;
138  transform-style: preserve-3d;
139  background: #dfdfdf;
140  animation: lid-keyboard-area infinite 7s ease;
141  transform: translateZ(-2px);
142  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
143}
144
145.macbody .touchpad {
146  width: 40px;
147  height: 31px;
148  position: absolute;
149  left: 50%;
150  top: 50%;
151  border-radius: 4px;
152  margin: -44px 0 0 -18px;
153  background: #cdcdcd;
154  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
155  box-shadow: inset 0 0 3px #888;
156}
157
158.macbody .keyboard {
159  width: 130px;
160  height: 45px;
161  position: absolute;
162  left: 7px;
163  top: 41px;
164  border-radius: 4px;
165  transform-style: preserve-3d;
166  background: #cdcdcd;
167  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
168  box-shadow: inset 0 0 3px #777;
169  padding: 0 0 0 2px;
170}
171
172.keyboard .key {
173  width: 6px;
174  height: 6px;
175  background: #444;
176  float: left;
177  margin: 1px;
178  transform: translateZ(-2px);
179  border-radius: 2px;
180  box-shadow: 0 -2px 0 #222;
181  animation: keys infinite 7s ease;
182}
183
184.key.space {
185  width: 45px;
186}
187
188.key.f {
189  height: 3px;
190}
191
192.macbody .pad {
193  width: 5px;
194  height: 5px;
195  background: #333;
196  border-radius: 100%;
197  position: absolute;
198}
199
200.pad.one {
201  left: 20px;
202  top: 20px;
203}
204
205.pad.two {
206  right: 20px;
207  top: 20px;
208}
209
210.pad.three {
211  right: 20px;
212  bottom: 20px;
213}
214
215.pad.four {
216  left: 20px;
217  bottom: 20px;
218}
219
220@keyframes rotate {
221  0% {
222    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
223  }
224
225  5% {
226    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
227  }
228
229  20% {
230    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
231  }
232
233  25% {
234    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
235  }
236
237  60% {
238    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
239  }
240
241  65% {
242    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
243  }
244
245  80% {
246    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
247  }
248
249  85% {
250    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
251  }
252
253  87% {
254    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
255  }
256
257  100% {
258    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
259  }
260}
261
262@keyframes lid-screen {
263  0% {
264    transform: rotateX(0deg);
265    background-position: left bottom;
266  }
267
268  5% {
269    transform: rotateX(50deg);
270    background-position: left bottom;
271  }
272
273  20% {
274    transform: rotateX(-90deg);
275    background-position: -150px top;
276  }
277
278  25% {
279    transform: rotateX(15deg);
280    background-position: left bottom;
281  }
282
283  30% {
284    transform: rotateX(-5deg);
285    background-position: right top;
286  }
287
288  38% {
289    transform: rotateX(5deg);
290    background-position: right top;
291  }
292
293  48% {
294    transform: rotateX(0deg);
295    background-position: right top;
296  }
297
298  90% {
299    transform: rotateX(0deg);
300    background-position: right top;
301  }
302
303  100% {
304    transform: rotateX(0deg);
305    background-position: right center;
306  }
307}
308
309@keyframes lid-macbody {
310  0% {
311    transform: rotateX(-90deg);
312  }
313
314  50% {
315    transform: rotateX(-90deg);
316  }
317
318  100% {
319    transform: rotateX(-90deg);
320  }
321}
322
323@keyframes lid-keyboard-area {
324  0% {
325    background-color: #dfdfdf;
326  }
327
328  50% {
329    background-color: #bbb;
330  }
331
332  100% {
333    background-color: #dfdfdf;
334  }
335}
336
337@keyframes screen-shade {
338  0% {
339    background-position: -20px 0px;
340  }
341
342  5% {
343    background-position: -40px 0px;
344  }
345
346  20% {
347    background-position: 200px 0;
348  }
349
350  50% {
351    background-position: -200px 0;
352  }
353
354  80% {
355    background-position: 0px 0px;
356  }
357
358  85% {
359    background-position: -30px 0;
360  }
361
362  90% {
363    background-position: -20px 0;
364  }
365
366  100% {
367    background-position: -20px 0px;
368  }
369}
370
371@keyframes keys {
372  0% {
373    box-shadow: 0 -2px 0 #222;
374  }
375
376  5% {
377    box-shadow: 1 -1px 0 #222;
378  }
379
380  20% {
381    box-shadow: -1px 1px 0 #222;
382  }
383
384  25% {
385    box-shadow: -1px 1px 0 #222;
386  }
387
388  60% {
389    box-shadow: -1px 1px 0 #222;
390  }
391
392  80% {
393    box-shadow: 0 -2px 0 #222;
394  }
395
396  85% {
397    box-shadow: 0 -2px 0 #222;
398  }
399
400  87% {
401    box-shadow: 0 -2px 0 #222;
402  }
403
404  100% {
405    box-shadow: 0 -2px 0 #222;
406  }
407}
408
409@keyframes shadow {
410  0% {
411    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
412    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
413  }
414
415  5% {
416    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
417    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
418  }
419
420  20% {
421    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
422    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
423  }
424
425  25% {
426    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
427    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
428  }
429
430  60% {
431    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
432    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
433  }
434
435  100% {
436    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
437  }
438}
439

.macbook {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -85px 0 0 -78px;
  perspective: 500px;
}

.shadow {
  position: absolute;
  width: 60px;
  height: 0px;
  left: 40px;
  top: 160px;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  animation: shadow infinite 7s ease;
}

.inner {
  z-index: 20;
  position: absolute;
  width: 150px;
  height: 96px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  animation: rotate infinite 7s ease;
}

.screen {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #ddd;
  transform-style: preserve-3d;
  transform-origin: 50% 93px;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: lid-screen infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
  background-position: left bottom;
  background-size: 300px 300px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}

.screen .logo {
  position: absolute;
  width: 20px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -10px;
  transform: rotateY(180deg) translateZ(0.1px);
}

.screen .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #d3d3d3;
  transform: translateZ(2px);
  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.screen .face-one .camera {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -1.5px;
}

.screen .face-one .display {
  width: 130px;
  height: 74px;
  margin: 10px;
  background-color: #000;
  background-size: 100% 100%;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,1);
}

.screen .face-one .display .shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 74px;
  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
  animation: screen-shade infinite 7s ease;
  background-size: 300px 200px;
  background-position: 0px 0px;
}

.screen .face-one span {
  position: absolute;
  top: 85px;
  left: 57px;
  font-size: 6px;
  color: #666
}

.macbody {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #cbcbcb;
  transform-style: preserve-3d;
  transform-origin: 50% bottom;
  transform: rotateX(-90deg);
  animation: lid-macbody infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.macbody .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  transform-style: preserve-3d;
  background: #dfdfdf;
  animation: lid-keyboard-area infinite 7s ease;
  transform: translateZ(-2px);
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}

.macbody .touchpad {
  width: 40px;
  height: 31px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  margin: -44px 0 0 -18px;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #888;
}

.macbody .keyboard {
  width: 130px;
  height: 45px;
  position: absolute;
  left: 7px;
  top: 41px;
  border-radius: 4px;
  transform-style: preserve-3d;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #777;
  padding: 0 0 0 2px;
}

.keyboard .key {
  width: 6px;
  height: 6px;
  background: #444;
  float: left;
  margin: 1px;
  transform: translateZ(-2px);
  border-radius: 2px;
  box-shadow: 0 -2px 0 #222;
  animation: keys infinite 7s ease;
}

.key.space {
  width: 45px;
}

.key.f {
  height: 3px;
}

.macbody .pad {
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 100%;
  position: absolute;
}

.pad.one {
  left: 20px;
  top: 20px;
}

.pad.two {
  right: 20px;
  top: 20px;
}

.pad.three {
  right: 20px;
  bottom: 20px;
}

.pad.four {
  left: 20px;
  bottom: 20px;
}

@keyframes rotate {
  0% {
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }

  5% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
  }

  20% {
    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
  }

  25% {
    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
  }

  60% {
    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
  }

  65% {
    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
  }

  80% {
    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
  }

  85% {
    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
  }

  87% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes lid-screen {
  0% {
    transform: rotateX(0deg);
    background-position: left bottom;
  }

  5% {
    transform: rotateX(50deg);
    background-position: left bottom;
  }

  20% {
    transform: rotateX(-90deg);
    background-position: -150px top;
  }

  25% {
    transform: rotateX(15deg);
    background-position: left bottom;
  }

  30% {
    transform: rotateX(-5deg);
    background-position: right top;
  }

  38% {
    transform: rotateX(5deg);
    background-position: right top;
  }

  48% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  90% {
    transform: rotateX(0deg);
    background-position: right top;
  }

  100% {
    transform: rotateX(0deg);
    background-position: right center;
  }
}

@keyframes lid-macbody {
  0% {
    transform: rotateX(-90deg);
  }

  50% {
    transform: rotateX(-90deg);
  }

  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes lid-keyboard-area {
  0% {
    background-color: #dfdfdf;
  }

  50% {
    background-color: #bbb;
  }

  100% {
    background-color: #dfdfdf;
  }
}

@keyframes screen-shade {
  0% {
    background-position: -20px 0px;
  }

  5% {
    background-position: -40px 0px;
  }

  20% {
    background-position: 200px 0;
  }

  50% {
    background-position: -200px 0;
  }

  80% {
    background-position: 0px 0px;
  }

  85% {
    background-position: -30px 0;
  }

  90% {
    background-position: -20px 0;
  }

  100% {
    background-position: -20px 0px;
  }
}

@keyframes keys {
  0% {
    box-shadow: 0 -2px 0 #222;
  }

  5% {
    box-shadow: 1 -1px 0 #222;
  }

  20% {
    box-shadow: -1px 1px 0 #222;
  }

  25% {
    box-shadow: -1px 1px 0 #222;
  }

  60% {
    box-shadow: -1px 1px 0 #222;
  }

  80% {
    box-shadow: 0 -2px 0 #222;
  }

  85% {
    box-shadow: 0 -2px 0 #222;
  }

  87% {
    box-shadow: 0 -2px 0 #222;
  }

  100% {
    box-shadow: 0 -2px 0 #222;
  }
}

@keyframes shadow {
  0% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  5% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  20% {
    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
  }

  25% {
    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
  }

  60% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }

  100% {
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
}

Toggle prefixes

1.8K views

Copy to Figma

1.8K views

Comments

Uncannypotato69 5. May at 13:56

5. May at 13:56

did you sell your soul to the devil to learn to make this cool loader?

VashonG 6. May at 8:33

6. May at 8:33

@Uncannypotato69 Haha! Glad you like it.

asar109 15. February at 20:13

15. February at 20:13

awesome bro

VashonG 1. March at 12:03

1. March at 12:03

@asar109 Thank you!

vinodjangid07 10. January at 9:04

10. January at 9:04

Hey !!! this is cool :)

VashonG 15. January at 6:32

15. January at 6:32

@vinodjangid07 Right!!!

No variations yet

MIT License

Copyright - 2024 VashonG (Vashon Gonzales) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.