Loader by JkHuger

#212121

1.rocket {
2  position: absolute;
3  top: 20%;
4  width: 80px;
5  left: calc(50% - 40px);
6}
7
8.rocket .rocket-body {
9  width: 80px;
10  left: calc(50% - 50px);
11  animation: bounce 0.5s infinite;
12}
13
14.rocket .rocket-body .body {
15  background-color: #dadada;
16  height: 180px;
17  left: calc(50% - 50px);
18  border-top-right-radius: 100%;
19  border-top-left-radius: 100%;
20  border-bottom-left-radius: 50%;
21  border-bottom-right-radius: 50%;
22  border-top: 5px solid #f5f5f5;
23}
24
25.rocket .rocket-body:before {
26  content: '';
27  position: absolute;
28  left: calc(50% - 24px);
29  width: 48px;
30  height: 13px;
31  background-color: #554842;
32  bottom: -13px;
33  border-bottom-right-radius: 60%;
34  border-bottom-left-radius: 60%;
35}
36
37.rocket .window {
38  position: absolute;
39  width: 40px;
40  height: 40px;
41  border-radius: 100%;
42  background-color: #a75248;
43  left: calc(50% - 25px);
44  top: 40px;
45  border: 5px solid #b4b2b2;
46}
47
48.rocket .fin {
49  position: absolute;
50  z-index: -100;
51  height: 55px;
52  width: 50px;
53  background-color: #a75248;
54}
55
56.rocket .fin-left {
57  left: -30px;
58  top: calc(100% - 55px);
59  border-top-left-radius: 80%;
60  border-bottom-left-radius: 20%;
61}
62
63.rocket .fin-right {
64  right: -30px;
65  top: calc(100% - 55px);
66  border-top-right-radius: 80%;
67  border-bottom-right-radius: 20%;
68}
69
70.rocket .exhaust-flame {
71  position: absolute;
72  top: 90%;
73  width: 28px;
74  background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
75  height: 150px;
76  left: calc(50% - 14px);
77  animation: exhaust 0.2s infinite;
78}
79
80.rocket .exhaust-fumes li {
81  width: 60px;
82  height: 60px;
83  background-color: #f5f5f5;
84  list-style: none;
85  position: absolute;
86  border-radius: 100%;
87}
88
89.rocket .exhaust-fumes li:first-child {
90  width: 200px;
91  height: 200px;
92  bottom: -300px;
93  animation: fumes 5s infinite;
94}
95
96.rocket .exhaust-fumes li:nth-child(2) {
97  width: 150px;
98  height: 150px;
99  left: -120px;
100  top: 260px;
101  animation: fumes 3.2s infinite;
102}
103
104.rocket .exhaust-fumes li:nth-child(3) {
105  width: 120px;
106  height: 120px;
107  left: -40px;
108  top: 330px;
109  animation: fumes 3s 1s infinite;
110}
111
112.rocket .exhaust-fumes li:nth-child(4) {
113  width: 100px;
114  height: 100px;
115  left: -170px;
116  animation: fumes 4s 2s infinite;
117  top: 380px;
118}
119
120.rocket .exhaust-fumes li:nth-child(5) {
121  width: 130px;
122  height: 130px;
123  left: -120px;
124  top: 350px;
125  animation: fumes 5s infinite;
126}
127
128.rocket .exhaust-fumes li:nth-child(6) {
129  width: 200px;
130  height: 200px;
131  left: -60px;
132  top: 280px;
133  animation: fumes2 10s infinite;
134}
135
136.rocket .exhaust-fumes li:nth-child(7) {
137  width: 100px;
138  height: 100px;
139  left: -100px;
140  top: 320px;
141}
142
143.rocket .exhaust-fumes li:nth-child(8) {
144  width: 110px;
145  height: 110px;
146  left: 70px;
147  top: 340px;
148}
149
150.rocket .exhaust-fumes li:nth-child(9) {
151  width: 90px;
152  height: 90px;
153  left: 200px;
154  top: 380px;
155  animation: fumes 20s infinite;
156}
157
158.star li {
159  list-style: none;
160  position: absolute;
161}
162
163.star li:before, .star li:after {
164  content: '';
165  position: absolute;
166  background-color: #f5f5f5;
167}
168
169.star li:before {
170  width: 10px;
171  height: 2px;
172  border-radius: 50%;
173}
174
175.star li:after {
176  height: 8px;
177  width: 2px;
178  left: 4px;
179  top: -3px;
180}
181
182.star li:first-child {
183  top: -30px;
184  left: -210px;
185  animation: twinkle 0.4s infinite;
186}
187
188.star li:nth-child(2) {
189  top: 0;
190  left: 60px;
191  animation: twinkle 0.5s infinite;
192}
193
194.star li:nth-child(2):before {
195  height: 1px;
196  width: 5px;
197}
198
199.star li:nth-child(2):after {
200  width: 1px;
201  height: 5px;
202  top: -2px;
203  left: 2px;
204}
205
206.star li:nth-child(3) {
207  left: 120px;
208  top: 220px;
209  animation: twinkle 1s infinite;
210}
211
212.star li:nth-child(4) {
213  left: -100px;
214  top: 200px;
215  animation: twinkle 0.5s ease infinite;
216}
217
218.star li:nth-child(5) {
219  left: 170px;
220  top: 100px;
221  animation: twinkle 0.4s ease infinite;
222}
223
224.star li:nth-child(6) {
225  top: 87px;
226  left: -79px;
227  animation: twinkle 0.2s infinite;
228}
229
230.star li:nth-child(6):before {
231  height: 1px;
232  width: 5px;
233}
234
235.star li:nth-child(6):after {
236  width: 1px;
237  height: 5px;
238  top: -2px;
239  left: 2px;
240}
241
242@keyframes fumes {
243  50% {
244    transform: scale(1.5);
245    background-color: transparent;
246  }
247
248  51% {
249    transform: scale(0.8);
250  }
251
252  100% {
253    background-color: #f5f5f5;
254    transform: scale(1);
255  }
256}
257
258@keyframes bounce {
259  0% {
260    transform: translate3d(0px, 0px, 0);
261  }
262
263  50% {
264    transform: translate3d(0px, -4px, 0);
265  }
266
267  100% {
268    transform: translate3d(0px, 0px, 0);
269  }
270}
271
272@keyframes exhaust {
273  0% {
274    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
275  }
276
277  50% {
278    background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);
279  }
280
281  75% {
282    background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);
283  }
284}
285
286@keyframes fumes2 {
287  50% {
288    transform: scale(1.1);
289  }
290}
291
292@keyframes twinkle {
293  80% {
294    transform: scale(1.1);
295    opacity: 0.7;
296  }
297}
298

.rocket {
  position: absolute;
  top: 20%;
  width: 80px;
  left: calc(50% - 40px);
}

.rocket .rocket-body {
  width: 80px;
  left: calc(50% - 50px);
  animation: bounce 0.5s infinite;
}

.rocket .rocket-body .body {
  background-color: #dadada;
  height: 180px;
  left: calc(50% - 50px);
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top: 5px solid #f5f5f5;
}

.rocket .rocket-body:before {
  content: '';
  position: absolute;
  left: calc(50% - 24px);
  width: 48px;
  height: 13px;
  background-color: #554842;
  bottom: -13px;
  border-bottom-right-radius: 60%;
  border-bottom-left-radius: 60%;
}

.rocket .window {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #a75248;
  left: calc(50% - 25px);
  top: 40px;
  border: 5px solid #b4b2b2;
}

.rocket .fin {
  position: absolute;
  z-index: -100;
  height: 55px;
  width: 50px;
  background-color: #a75248;
}

.rocket .fin-left {
  left: -30px;
  top: calc(100% - 55px);
  border-top-left-radius: 80%;
  border-bottom-left-radius: 20%;
}

.rocket .fin-right {
  right: -30px;
  top: calc(100% - 55px);
  border-top-right-radius: 80%;
  border-bottom-right-radius: 20%;
}

.rocket .exhaust-flame {
  position: absolute;
  top: 90%;
  width: 28px;
  background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
  height: 150px;
  left: calc(50% - 14px);
  animation: exhaust 0.2s infinite;
}

.rocket .exhaust-fumes li {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  list-style: none;
  position: absolute;
  border-radius: 100%;
}

.rocket .exhaust-fumes li:first-child {
  width: 200px;
  height: 200px;
  bottom: -300px;
  animation: fumes 5s infinite;
}

.rocket .exhaust-fumes li:nth-child(2) {
  width: 150px;
  height: 150px;
  left: -120px;
  top: 260px;
  animation: fumes 3.2s infinite;
}

.rocket .exhaust-fumes li:nth-child(3) {
  width: 120px;
  height: 120px;
  left: -40px;
  top: 330px;
  animation: fumes 3s 1s infinite;
}

.rocket .exhaust-fumes li:nth-child(4) {
  width: 100px;
  height: 100px;
  left: -170px;
  animation: fumes 4s 2s infinite;
  top: 380px;
}

.rocket .exhaust-fumes li:nth-child(5) {
  width: 130px;
  height: 130px;
  left: -120px;
  top: 350px;
  animation: fumes 5s infinite;
}

.rocket .exhaust-fumes li:nth-child(6) {
  width: 200px;
  height: 200px;
  left: -60px;
  top: 280px;
  animation: fumes2 10s infinite;
}

.rocket .exhaust-fumes li:nth-child(7) {
  width: 100px;
  height: 100px;
  left: -100px;
  top: 320px;
}

.rocket .exhaust-fumes li:nth-child(8) {
  width: 110px;
  height: 110px;
  left: 70px;
  top: 340px;
}

.rocket .exhaust-fumes li:nth-child(9) {
  width: 90px;
  height: 90px;
  left: 200px;
  top: 380px;
  animation: fumes 20s infinite;
}

.star li {
  list-style: none;
  position: absolute;
}

.star li:before, .star li:after {
  content: '';
  position: absolute;
  background-color: #f5f5f5;
}

.star li:before {
  width: 10px;
  height: 2px;
  border-radius: 50%;
}

.star li:after {
  height: 8px;
  width: 2px;
  left: 4px;
  top: -3px;
}

.star li:first-child {
  top: -30px;
  left: -210px;
  animation: twinkle 0.4s infinite;
}

.star li:nth-child(2) {
  top: 0;
  left: 60px;
  animation: twinkle 0.5s infinite;
}

.star li:nth-child(2):before {
  height: 1px;
  width: 5px;
}

.star li:nth-child(2):after {
  width: 1px;
  height: 5px;
  top: -2px;
  left: 2px;
}

.star li:nth-child(3) {
  left: 120px;
  top: 220px;
  animation: twinkle 1s infinite;
}

.star li:nth-child(4) {
  left: -100px;
  top: 200px;
  animation: twinkle 0.5s ease infinite;
}

.star li:nth-child(5) {
  left: 170px;
  top: 100px;
  animation: twinkle 0.4s ease infinite;
}

.star li:nth-child(6) {
  top: 87px;
  left: -79px;
  animation: twinkle 0.2s infinite;
}

.star li:nth-child(6):before {
  height: 1px;
  width: 5px;
}

.star li:nth-child(6):after {
  width: 1px;
  height: 5px;
  top: -2px;
  left: 2px;
}

@keyframes fumes {
  50% {
    transform: scale(1.5);
    background-color: transparent;
  }

  51% {
    transform: scale(0.8);
  }

  100% {
    background-color: #f5f5f5;
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translate3d(0px, 0px, 0);
  }

  50% {
    transform: translate3d(0px, -4px, 0);
  }

  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

@keyframes exhaust {
  0% {
    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
  }

  50% {
    background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);
  }

  75% {
    background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);
  }
}

@keyframes fumes2 {
  50% {
    transform: scale(1.1);
  }
}

@keyframes twinkle {
  80% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

Toggle prefixes

1.8K views

Copy to Figma

1.8K views

Comments

VadimTheCat 18. December 2023. at 13:33

18. December 2023. at 13:33

A little strange but it kind of shakes after 0.5s... I mean the whole screen has a little shake at firts and then stabilizes

VadimTheCat 18. December 2023. at 13:31

18. December 2023. at 13:31

Amazing bro! I use it in my personal portfolio website))

JkHuger 2. January at 17:16

2. January at 17:16

@VadimTheCat nice to hear that

No variations yet

MIT License

Copyright - 2024 JkHuger (JkHuger) 

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.