Loader by JkHuger

Posted by

@JkHuger

Theme:

Light

#loader

#e8e8e8

433 views

Add prefixes

1.piggy-wrapper {
2  position: relative;
3  width: 350px;
4  height: 350px;
5  display: block;
6  margin: 0 auto;
7  margin-top: 0px;
8}
9
10.piggy-wrap {
11  position: absolute;
12  top: 0;
13  left: 0;
14  z-index: 10;
15  width: 100%;
16  height: 100%;
17  transform-origin: bottom center;
18  animation: trembling 5s linear infinite;
19}
20
21@keyframes trembling {
22  0% {
23    transform: scale(1);
24  }
25
26  19% {
27    transform: scale(1);
28  }
29
30  21% {
31    transform: scale(0.99);
32  }
33
34  22% {
35    transform: scale(1);
36  }
37
38  23% {
39    transform: scale(0.99);
40  }
41
42  24% {
43    transform: scale(1);
44  }
45
46  25% {
47    transform: scale(0.99);
48  }
49
50  26% {
51    transform: scale(1);
52  }
53
54  25% {
55    transform: scale(0.99);
56  }
57
58  26% {
59    transform: scale(1);
60  }
61
62  27% {
63    transform: scale(0.99);
64  }
65
66  28% {
67    transform: scale(1);
68  }
69
70  29% {
71    transform: scale(0.99);
72  }
73
74  30% {
75    transform: scale(1);
76  }
77
78  60% {
79    transform: scale(0.95);
80  }
81
82  61% {
83    transform: scale(1);
84  }
85
86  100% {
87    transform: scale(1);
88  }
89}
90
91.piggy {
92  position: absolute;
93  bottom: 40px;
94  left: 50%;
95  margin-left: -160px;
96  width: 270px;
97  height: 200px;
98  display: block;
99  border-radius: 100px;
100  background-color: #d88fa0;
101}
102
103.nose {
104  position: absolute;
105  top: 80px;
106  left: -25px;
107  width: 40px;
108  height: 60px;
109  display: block;
110  background-color: #d88fa0;
111  z-index: 1;
112  border-radius: 4px;
113}
114
115.mouth {
116  position: absolute;
117  top: 95px;
118  left: -15px;
119  width: 0;
120  height: 0;
121  z-index: 8;
122  display: block;
123  border-bottom: 60px solid #d88fa0;
124  border-left: 20px solid transparent;
125  border-right: 20px solid transparent;
126  border-radius: 4px;
127}
128
129.ear {
130  position: absolute;
131  top: -35px;
132  left: 70px;
133  width: 45px;
134  height: 40px;
135  display: block;
136  border-top-right-radius: 60px;
137  background-color: #d88fa0;
138  z-index: 1;
139}
140
141.piggy:before {
142  position: absolute;
143  content: '';
144  top: -25px;
145  left: 55px;
146  width: 60px;
147  height: 60px;
148  display: block;
149  border-top-right-radius: 60px;
150  background-color: #cb6980;
151  z-index: -1;
152}
153
154.tail {
155  position: absolute;
156  left: 254px;
157  top: 125px;
158}
159
160.tail span {
161  position: absolute;
162  left: 0;
163  top: 0;
164  width: 20px;
165  height: 5px;
166  transform: rotate(30deg);
167  background-color: #d88fa0;
168}
169
170.tail span:nth-child(2) {
171  left: 3px;
172  top: -38px;
173  width: 50px;
174  height: 50px;
175  transform: rotate(-20deg);
176  background-color: transparent;
177  border-radius: 50%;
178  border-width: 5px;
179  border-style: solid;
180  border-color: transparent #d88fa0 #d88fa0 transparent;
181}
182
183.tail span:nth-child(3) {
184  left: 22px;
185  top: -36px;
186  width: 30px;
187  height: 30px;
188  transform: rotate(-40deg);
189  background-color: transparent;
190  border-radius: 50%;
191  border-width: 5px;
192  border-style: solid;
193  border-color: #d88fa0 transparent transparent #d88fa0;
194}
195
196.tail span:nth-child(4) {
197  left: 7px;
198  top: -66px;
199  width: 60px;
200  height: 60px;
201  transform: rotate(-40deg);
202  background-color: transparent;
203  border-radius: 50%;
204  border-width: 5px;
205  border-style: solid;
206  border-color: transparent transparent #d88fa0 transparent;
207}
208
209.eye {
210  position: absolute;
211  left: 35px;
212  top: 75px;
213  width: 30px;
214  height: 30px;
215  transform: rotate(45deg);
216  border-radius: 50%;
217  border-width: 4px;
218  border-style: solid;
219  border-color: #555 transparent transparent #555;
220  animation: blink 5s linear infinite;
221}
222
223@keyframes blink {
224  0% {
225    border-color: #555 transparent transparent #555;
226  }
227
228  19% {
229    border-color: #555 transparent transparent #555;
230  }
231
232  20% {
233    border-color: transparent #555 #555 transparent;
234  }
235
236  60% {
237    border-color: transparent #555 #555 transparent;
238  }
239
240  61% {
241    border-color: #555 transparent transparent #555;
242  }
243
244  100% {
245    border-color: #555 transparent transparent #555;
246  }
247}
248
249.hole {
250  position: absolute;
251  left: 121px;
252  top: 0;
253  width: 60px;
254  height: 5px;
255  background-color: #555;
256  border-bottom-left-radius: 5px;
257  border-bottom-right-radius: 5px;
258}
259
260.coin-wrap {
261  position: absolute;
262  top: 0;
263  left: -8px;
264  z-index: 9;
265  width: 100%;
266  height: 100%;
267  opacity: 0;
268  transform-origin: bottom center;
269  animation: trembling 5s linear infinite, moveCoin 5s linear infinite;
270}
271
272.coin {
273  position: absolute;
274  top: 110px;
275  left: 143px;
276  z-index: 9;
277  width: 61.5px;
278  height: 61.5px;
279  border-radius: 50%;
280  border: 6px solid #e67e22;
281  background-color: #f39c12;
282  text-align: center;
283  line-height: 68px;
284  font-size: 45px;
285  font-weight: 500;
286  color: rgba(32,32,32,0.5);
287  box-shadow: inset 0 0 4px #777;
288}
289
290@keyframes moveCoin {
291  0% {
292    opacity: 0;
293    top: 0;
294  }
295
296  19% {
297    opacity: 1;
298    top: 0;
299  }
300
301  21% {
302    top: -7px;
303  }
304
305  22% {
306    top: -7px;
307  }
308
309  23% {
310    top: -14px;
311  }
312
313  24% {
314    top: -14px;
315  }
316
317  25% {
318    top: -21px;
319  }
320
321  26% {
322    top: -21px;
323  }
324
325  27% {
326    top: -28px;
327  }
328
329  28% {
330    top: -28px;
331  }
332
333  29% {
334    top: -35px;
335  }
336
337  30% {
338    top: -35px;
339  }
340
341  60% {
342    top: -35px;
343  }
344
345  66% {
346    top: -220px;
347    opacity: 1;
348  }
349
350  67% {
351    top: -220px;
352    opacity: 0;
353  }
354
355  99% {
356    top: 0;
357    opacity: 0;
358  }
359
360  100% {
361    opacity: 0;
362    top: 0;
363  }
364}
365
366.legs {
367  position: absolute;
368  bottom: 14px;
369  left: 96px;
370  width: 40px;
371  height: 60px;
372  display: block;
373  background-color: #cb6980;
374  border-radius: 3px;
375  z-index: 1;
376}
377
378.legs:after {
379  position: absolute;
380  content: '';
381  bottom: 0;
382  left: 0;
383  width: 30px;
384  height: 12px;
385  display: block;
386  background-color: #d88fa0;
387  border-bottom-left-radius: 3px;
388  border-top-right-radius: 3px;
389  z-index: 1;
390}
391
392.legs.back {
393  left: 206px;
394}

.piggy-wrapper {
  position: relative;
  width: 350px;
  height: 350px;
  display: block;
  margin: 0 auto;
  margin-top: 0px;
}

.piggy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  animation: trembling 5s linear infinite;
}

@keyframes trembling {
  0% {
    transform: scale(1);
  }

  19% {
    transform: scale(1);
  }

  21% {
    transform: scale(0.99);
  }

  22% {
    transform: scale(1);
  }

  23% {
    transform: scale(0.99);
  }

  24% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.99);
  }

  26% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.99);
  }

  26% {
    transform: scale(1);
  }

  27% {
    transform: scale(0.99);
  }

  28% {
    transform: scale(1);
  }

  29% {
    transform: scale(0.99);
  }

  30% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.95);
  }

  61% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.piggy {
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -160px;
  width: 270px;
  height: 200px;
  display: block;
  border-radius: 100px;
  background-color: #d88fa0;
}

.nose {
  position: absolute;
  top: 80px;
  left: -25px;
  width: 40px;
  height: 60px;
  display: block;
  background-color: #d88fa0;
  z-index: 1;
  border-radius: 4px;
}

.mouth {
  position: absolute;
  top: 95px;
  left: -15px;
  width: 0;
  height: 0;
  z-index: 8;
  display: block;
  border-bottom: 60px solid #d88fa0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-radius: 4px;
}

.ear {
  position: absolute;
  top: -35px;
  left: 70px;
  width: 45px;
  height: 40px;
  display: block;
  border-top-right-radius: 60px;
  background-color: #d88fa0;
  z-index: 1;
}

.piggy:before {
  position: absolute;
  content: '';
  top: -25px;
  left: 55px;
  width: 60px;
  height: 60px;
  display: block;
  border-top-right-radius: 60px;
  background-color: #cb6980;
  z-index: -1;
}

.tail {
  position: absolute;
  left: 254px;
  top: 125px;
}

.tail span {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 5px;
  transform: rotate(30deg);
  background-color: #d88fa0;
}

.tail span:nth-child(2) {
  left: 3px;
  top: -38px;
  width: 50px;
  height: 50px;
  transform: rotate(-20deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #d88fa0 #d88fa0 transparent;
}

.tail span:nth-child(3) {
  left: 22px;
  top: -36px;
  width: 30px;
  height: 30px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #d88fa0 transparent transparent #d88fa0;
}

.tail span:nth-child(4) {
  left: 7px;
  top: -66px;
  width: 60px;
  height: 60px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #d88fa0 transparent;
}

.eye {
  position: absolute;
  left: 35px;
  top: 75px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: #555 transparent transparent #555;
  animation: blink 5s linear infinite;
}

@keyframes blink {
  0% {
    border-color: #555 transparent transparent #555;
  }

  19% {
    border-color: #555 transparent transparent #555;
  }

  20% {
    border-color: transparent #555 #555 transparent;
  }

  60% {
    border-color: transparent #555 #555 transparent;
  }

  61% {
    border-color: #555 transparent transparent #555;
  }

  100% {
    border-color: #555 transparent transparent #555;
  }
}

.hole {
  position: absolute;
  left: 121px;
  top: 0;
  width: 60px;
  height: 5px;
  background-color: #555;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.coin-wrap {
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 9;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: bottom center;
  animation: trembling 5s linear infinite, moveCoin 5s linear infinite;
}

.coin {
  position: absolute;
  top: 110px;
  left: 143px;
  z-index: 9;
  width: 61.5px;
  height: 61.5px;
  border-radius: 50%;
  border: 6px solid #e67e22;
  background-color: #f39c12;
  text-align: center;
  line-height: 68px;
  font-size: 45px;
  font-weight: 500;
  color: rgba(32,32,32,0.5);
  box-shadow: inset 0 0 4px #777;
}

@keyframes moveCoin {
  0% {
    opacity: 0;
    top: 0;
  }

  19% {
    opacity: 1;
    top: 0;
  }

  21% {
    top: -7px;
  }

  22% {
    top: -7px;
  }

  23% {
    top: -14px;
  }

  24% {
    top: -14px;
  }

  25% {
    top: -21px;
  }

  26% {
    top: -21px;
  }

  27% {
    top: -28px;
  }

  28% {
    top: -28px;
  }

  29% {
    top: -35px;
  }

  30% {
    top: -35px;
  }

  60% {
    top: -35px;
  }

  66% {
    top: -220px;
    opacity: 1;
  }

  67% {
    top: -220px;
    opacity: 0;
  }

  99% {
    top: 0;
    opacity: 0;
  }

  100% {
    opacity: 0;
    top: 0;
  }
}

.legs {
  position: absolute;
  bottom: 14px;
  left: 96px;
  width: 40px;
  height: 60px;
  display: block;
  background-color: #cb6980;
  border-radius: 3px;
  z-index: 1;
}

.legs:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 30px;
  height: 12px;
  display: block;
  background-color: #d88fa0;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 1;
}

.legs.back {
  left: 206px;
}

JkHuger

MIT License

Copyright - 2023 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.