Loader by JkHuger

Made by

@JkHuger

Theme:

Dark

#loader#astronaut

#212121

2.4K views

CSSAdd prefixes

1@keyframes snow {
2  0% {
3    opacity: 0;
4    transform: translateY(0px);
5  }
6
7  20% {
8    opacity: 1;
9  }
10
11  100% {
12    opacity: 1;
13    transform: translateY(650px);
14  }
15}
16
17@keyframes astronaut {
18  0% {
19    transform: rotate(0deg);
20  }
21
22  100% {
23    transform: rotate(360deg);
24  }
25}
26
27.box-of-star1,
28.box-of-star2,
29.box-of-star3,
30.box-of-star4 {
31  width: 100%;
32  position: absolute;
33  z-index: 10;
34  left: 0;
35  top: 0;
36  transform: translateY(0px);
37  height: 700px;
38}
39
40.box-of-star1 {
41  animation: snow 5s linear infinite;
42}
43
44.box-of-star2 {
45  animation: snow 5s -1.64s linear infinite;
46}
47
48.box-of-star3 {
49  animation: snow 5s -2.30s linear infinite;
50}
51
52.box-of-star4 {
53  animation: snow 5s -3.30s linear infinite;
54}
55
56.star {
57  width: 3px;
58  height: 3px;
59  border-radius: 50%;
60  background-color: #FFF;
61  position: absolute;
62  z-index: 10;
63  opacity: 0.7;
64}
65
66.star:before {
67  content: "";
68  width: 6px;
69  height: 6px;
70  border-radius: 50%;
71  background-color: #FFF;
72  position: absolute;
73  z-index: 10;
74  top: 80px;
75  left: 70px;
76  opacity: .7;
77}
78
79.star:after {
80  content: "";
81  width: 8px;
82  height: 8px;
83  border-radius: 50%;
84  background-color: #FFF;
85  position: absolute;
86  z-index: 10;
87  top: 8px;
88  left: 170px;
89  opacity: .9;
90}
91
92.star-position1 {
93  top: 30px;
94  left: 20px;
95}
96
97.star-position2 {
98  top: 110px;
99  left: 250px;
100}
101
102.star-position3 {
103  top: 60px;
104  left: 570px;
105}
106
107.star-position4 {
108  top: 120px;
109  left: 900px;
110}
111
112.star-position5 {
113  top: 20px;
114  left: 1120px;
115}
116
117.star-position6 {
118  top: 90px;
119  left: 1280px;
120}
121
122.star-position7 {
123  top: 30px;
124  left: 1480px;
125}
126
127.astronaut {
128  width: 250px;
129  height: 300px;
130  position: absolute;
131  z-index: 11;
132  top: calc(50% - 150px);
133  left: calc(50% - 125px);
134  animation: astronaut 5s linear infinite;
135}
136
137.schoolbag {
138  width: 100px;
139  height: 150px;
140  position: absolute;
141  z-index: 1;
142  top: calc(50% - 75px);
143  left: calc(50% - 50px);
144  background-color: #94b7ca;
145  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
146}
147
148.head {
149  width: 97px;
150  height: 80px;
151  position: absolute;
152  z-index: 3;
153  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
154  border-radius: 50%;
155  top: 34px;
156  left: calc(50% - 47.5px);
157}
158
159.head:after {
160  content: "";
161  width: 60px;
162  height: 50px;
163  position: absolute;
164  top: calc(50% - 25px);
165  left: calc(50% - 30px);
166  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
167  border-radius: 15px;
168}
169
170.head:before {
171  content: "";
172  width: 12px;
173  height: 25px;
174  position: absolute;
175  top: calc(50% - 12.5px);
176  left: -4px;
177  background-color: #618095;
178  border-radius: 5px;
179  box-shadow: 92px 0px 0px #618095;
180}
181
182.body {
183  width: 85px;
184  height: 100px;
185  position: absolute;
186  z-index: 2;
187  background-color: #fffbff;
188  border-radius: 40px / 20px;
189  top: 105px;
190  left: calc(50% - 41px);
191  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
192}
193
194.panel {
195  width: 60px;
196  height: 40px;
197  position: absolute;
198  top: 20px;
199  left: calc(50% - 30px);
200  background-color: #b7cceb;
201}
202
203.panel:before {
204  content: "";
205  width: 30px;
206  height: 5px;
207  position: absolute;
208  top: 9px;
209  left: 7px;
210  background-color: #fbfdfa;
211  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
212}
213
214.panel:after {
215  content: "";
216  width: 8px;
217  height: 8px;
218  position: absolute;
219  top: 9px;
220  right: 7px;
221  background-color: #fbfdfa;
222  border-radius: 50%;
223  box-shadow: 0px 14px 0px 2px #fbfdfa;
224}
225
226.arm {
227  width: 80px;
228  height: 30px;
229  position: absolute;
230  top: 121px;
231  z-index: 2;
232}
233
234.arm-left {
235  left: 30px;
236  background-color: #e3e8eb;
237  border-radius: 0 0 0 39px;
238}
239
240.arm-right {
241  right: 30px;
242  background-color: #fbfdfa;
243  border-radius: 0 0 39px 0;
244}
245
246.arm-left:before,
247.arm-right:before {
248  content: "";
249  width: 30px;
250  height: 70px;
251  position: absolute;
252  top: -40px;
253}
254
255.arm-left:before {
256  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
257  left: 0;
258  background-color: #e3e8eb;
259}
260
261.arm-right:before {
262  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
263  right: 0;
264  background-color: #fbfdfa;
265}
266
267.arm-left:after,
268.arm-right:after {
269  content: "";
270  width: 30px;
271  height: 10px;
272  position: absolute;
273  top: -24px;
274}
275
276.arm-left:after {
277  background-color: #6e91a4;
278  left: 0;
279}
280
281.arm-right:after {
282  right: 0;
283  background-color: #b6d2e0;
284}
285
286.leg {
287  width: 30px;
288  height: 40px;
289  position: absolute;
290  z-index: 2;
291  bottom: 70px;
292}
293
294.leg-left {
295  left: 76px;
296  background-color: #e3e8eb;
297  transform: rotate(20deg);
298}
299
300.leg-right {
301  right: 73px;
302  background-color: #fbfdfa;
303  transform: rotate(-20deg);
304}
305
306.leg-left:before,
307.leg-right:before {
308  content: "";
309  width: 50px;
310  height: 25px;
311  position: absolute;
312  bottom: -26px;
313}
314
315.leg-left:before {
316  left: -20px;
317  background-color: #e3e8eb;
318  border-radius: 30px 0 0 0;
319  border-bottom: 10px solid #6d96ac;
320}
321
322.leg-right:before {
323  right: -20px;
324  background-color: #fbfdfa;
325  border-radius: 0 30px 0 0;
326  border-bottom: 10px solid #b0cfe4;
327}

@keyframes snow {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(650px);
  }
}

@keyframes astronaut {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4 {
  width: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  transform: translateY(0px);
  height: 700px;
}

.box-of-star1 {
  animation: snow 5s linear infinite;
}

.box-of-star2 {
  animation: snow 5s -1.64s linear infinite;
}

.box-of-star3 {
  animation: snow 5s -2.30s linear infinite;
}

.box-of-star4 {
  animation: snow 5s -3.30s linear infinite;
}

.star {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  opacity: 0.7;
}

.star:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 80px;
  left: 70px;
  opacity: .7;
}

.star:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 170px;
  opacity: .9;
}

.star-position1 {
  top: 30px;
  left: 20px;
}

.star-position2 {
  top: 110px;
  left: 250px;
}

.star-position3 {
  top: 60px;
  left: 570px;
}

.star-position4 {
  top: 120px;
  left: 900px;
}

.star-position5 {
  top: 20px;
  left: 1120px;
}

.star-position6 {
  top: 90px;
  left: 1280px;
}

.star-position7 {
  top: 30px;
  left: 1480px;
}

.astronaut {
  width: 250px;
  height: 300px;
  position: absolute;
  z-index: 11;
  top: calc(50% - 150px);
  left: calc(50% - 125px);
  animation: astronaut 5s linear infinite;
}

.schoolbag {
  width: 100px;
  height: 150px;
  position: absolute;
  z-index: 1;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
  background-color: #94b7ca;
  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
}

.head {
  width: 97px;
  height: 80px;
  position: absolute;
  z-index: 3;
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
  border-radius: 50%;
  top: 34px;
  left: calc(50% - 47.5px);
}

.head:after {
  content: "";
  width: 60px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 30px);
  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
  border-radius: 15px;
}

.head:before {
  content: "";
  width: 12px;
  height: 25px;
  position: absolute;
  top: calc(50% - 12.5px);
  left: -4px;
  background-color: #618095;
  border-radius: 5px;
  box-shadow: 92px 0px 0px #618095;
}

.body {
  width: 85px;
  height: 100px;
  position: absolute;
  z-index: 2;
  background-color: #fffbff;
  border-radius: 40px / 20px;
  top: 105px;
  left: calc(50% - 41px);
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.panel {
  width: 60px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: calc(50% - 30px);
  background-color: #b7cceb;
}

.panel:before {
  content: "";
  width: 30px;
  height: 5px;
  position: absolute;
  top: 9px;
  left: 7px;
  background-color: #fbfdfa;
  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
}

.panel:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 9px;
  right: 7px;
  background-color: #fbfdfa;
  border-radius: 50%;
  box-shadow: 0px 14px 0px 2px #fbfdfa;
}

.arm {
  width: 80px;
  height: 30px;
  position: absolute;
  top: 121px;
  z-index: 2;
}

.arm-left {
  left: 30px;
  background-color: #e3e8eb;
  border-radius: 0 0 0 39px;
}

.arm-right {
  right: 30px;
  background-color: #fbfdfa;
  border-radius: 0 0 39px 0;
}

.arm-left:before,
.arm-right:before {
  content: "";
  width: 30px;
  height: 70px;
  position: absolute;
  top: -40px;
}

.arm-left:before {
  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
  left: 0;
  background-color: #e3e8eb;
}

.arm-right:before {
  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
  right: 0;
  background-color: #fbfdfa;
}

.arm-left:after,
.arm-right:after {
  content: "";
  width: 30px;
  height: 10px;
  position: absolute;
  top: -24px;
}

.arm-left:after {
  background-color: #6e91a4;
  left: 0;
}

.arm-right:after {
  right: 0;
  background-color: #b6d2e0;
}

.leg {
  width: 30px;
  height: 40px;
  position: absolute;
  z-index: 2;
  bottom: 70px;
}

.leg-left {
  left: 76px;
  background-color: #e3e8eb;
  transform: rotate(20deg);
}

.leg-right {
  right: 73px;
  background-color: #fbfdfa;
  transform: rotate(-20deg);
}

.leg-left:before,
.leg-right:before {
  content: "";
  width: 50px;
  height: 25px;
  position: absolute;
  bottom: -26px;
}

.leg-left:before {
  left: -20px;
  background-color: #e3e8eb;
  border-radius: 30px 0 0 0;
  border-bottom: 10px solid #6d96ac;
}

.leg-right:before {
  right: -20px;
  background-color: #fbfdfa;
  border-radius: 0 30px 0 0;
  border-bottom: 10px solid #b0cfe4;
}

HTML

1<div class="box-of-star1">
2    <div class="star star-position1"></div>
3    <div class="star star-position2"></div>
4    <div class="star star-position3"></div>
5    <div class="star star-position4"></div>
6    <div class="star star-position5"></div>
7    <div class="star star-position6"></div>
8    <div class="star star-position7"></div>
9  </div>
10  <div class="box-of-star2">
11    <div class="star star-position1"></div>
12    <div class="star star-position2"></div>
13    <div class="star star-position3"></div>
14    <div class="star star-position4"></div>
15    <div class="star star-position5"></div>
16    <div class="star star-position6"></div>
17    <div class="star star-position7"></div>
18  </div>
19  <div class="box-of-star3">
20    <div class="star star-position1"></div>
21    <div class="star star-position2"></div>
22    <div class="star star-position3"></div>
23    <div class="star star-position4"></div>
24    <div class="star star-position5"></div>
25    <div class="star star-position6"></div>
26    <div class="star star-position7"></div>
27  </div>
28  <div class="box-of-star4">
29    <div class="star star-position1"></div>
30    <div class="star star-position2"></div>
31    <div class="star star-position3"></div>
32    <div class="star star-position4"></div>
33    <div class="star star-position5"></div>
34    <div class="star star-position6"></div>
35    <div class="star star-position7"></div>
36  </div>
37  <div data-js="astro" class="astronaut">
38    <div class="head"></div>
39    <div class="arm arm-left"></div>
40    <div class="arm arm-right"></div>
41    <div class="body">
42      <div class="panel"></div>
43    </div>
44    <div class="leg leg-left"></div>
45    <div class="leg leg-right"></div>
46    <div class="schoolbag"></div>
47  </div>

<div class="box-of-star1">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star2">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star3">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star4">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div data-js="astro" class="astronaut">
    <div class="head"></div>
    <div class="arm arm-left"></div>
    <div class="arm arm-right"></div>
    <div class="body">
      <div class="panel"></div>
    </div>
    <div class="leg leg-left"></div>
    <div class="leg leg-right"></div>
    <div class="schoolbag"></div>
  </div>