Loader by Nawsome

1.loader {
2  position: relative;
3  width: 75px;
4  height: 100px;
5}
6
7.loader__bar {
8  position: absolute;
9  bottom: 0;
10  width: 10px;
11  height: 50%;
12  background: rgb(0, 0, 0);
13  transform-origin: center bottom;
14  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
15}
16
17.loader__bar:nth-child(1) {
18  left: 0px;
19  transform: scale(1, 0.2);
20  -webkit-animation: barUp1 4s infinite;
21  animation: barUp1 4s infinite;
22}
23
24.loader__bar:nth-child(2) {
25  left: 15px;
26  transform: scale(1, 0.4);
27  -webkit-animation: barUp2 4s infinite;
28  animation: barUp2 4s infinite;
29}
30
31.loader__bar:nth-child(3) {
32  left: 30px;
33  transform: scale(1, 0.6);
34  -webkit-animation: barUp3 4s infinite;
35  animation: barUp3 4s infinite;
36}
37
38.loader__bar:nth-child(4) {
39  left: 45px;
40  transform: scale(1, 0.8);
41  -webkit-animation: barUp4 4s infinite;
42  animation: barUp4 4s infinite;
43}
44
45.loader__bar:nth-child(5) {
46  left: 60px;
47  transform: scale(1, 1);
48  -webkit-animation: barUp5 4s infinite;
49  animation: barUp5 4s infinite;
50}
51
52.loader__ball {
53  position: absolute;
54  bottom: 10px;
55  left: 0;
56  width: 10px;
57  height: 10px;
58  background: rgb(44, 143, 255);
59  border-radius: 50%;
60  -webkit-animation: ball624 4s infinite;
61  animation: ball624 4s infinite;
62}
63
64@keyframes ball624 {
65  0% {
66    transform: translate(0, 0);
67  }
68
69  5% {
70    transform: translate(8px, -14px);
71  }
72
73  10% {
74    transform: translate(15px, -10px);
75  }
76
77  17% {
78    transform: translate(23px, -24px);
79  }
80
81  20% {
82    transform: translate(30px, -20px);
83  }
84
85  27% {
86    transform: translate(38px, -34px);
87  }
88
89  30% {
90    transform: translate(45px, -30px);
91  }
92
93  37% {
94    transform: translate(53px, -44px);
95  }
96
97  40% {
98    transform: translate(60px, -40px);
99  }
100
101  50% {
102    transform: translate(60px, 0);
103  }
104
105  57% {
106    transform: translate(53px, -14px);
107  }
108
109  60% {
110    transform: translate(45px, -10px);
111  }
112
113  67% {
114    transform: translate(37px, -24px);
115  }
116
117  70% {
118    transform: translate(30px, -20px);
119  }
120
121  77% {
122    transform: translate(22px, -34px);
123  }
124
125  80% {
126    transform: translate(15px, -30px);
127  }
128
129  87% {
130    transform: translate(7px, -44px);
131  }
132
133  90% {
134    transform: translate(0, -40px);
135  }
136
137  100% {
138    transform: translate(0, 0);
139  }
140}
141
142@-webkit-keyframes barUp1 {
143  0% {
144    transform: scale(1, 0.2);
145  }
146
147  40% {
148    transform: scale(1, 0.2);
149  }
150
151  50% {
152    transform: scale(1, 1);
153  }
154
155  90% {
156    transform: scale(1, 1);
157  }
158
159  100% {
160    transform: scale(1, 0.2);
161  }
162}
163
164@keyframes barUp1 {
165  0% {
166    transform: scale(1, 0.2);
167  }
168
169  40% {
170    transform: scale(1, 0.2);
171  }
172
173  50% {
174    transform: scale(1, 1);
175  }
176
177  90% {
178    transform: scale(1, 1);
179  }
180
181  100% {
182    transform: scale(1, 0.2);
183  }
184}
185
186@-webkit-keyframes barUp2 {
187  0% {
188    transform: scale(1, 0.4);
189  }
190
191  40% {
192    transform: scale(1, 0.4);
193  }
194
195  50% {
196    transform: scale(1, 0.8);
197  }
198
199  90% {
200    transform: scale(1, 0.8);
201  }
202
203  100% {
204    transform: scale(1, 0.4);
205  }
206}
207
208@keyframes barUp2 {
209  0% {
210    transform: scale(1, 0.4);
211  }
212
213  40% {
214    transform: scale(1, 0.4);
215  }
216
217  50% {
218    transform: scale(1, 0.8);
219  }
220
221  90% {
222    transform: scale(1, 0.8);
223  }
224
225  100% {
226    transform: scale(1, 0.4);
227  }
228}
229
230@-webkit-keyframes barUp3 {
231  0% {
232    transform: scale(1, 0.6);
233  }
234
235  100% {
236    transform: scale(1, 0.6);
237  }
238}
239
240@keyframes barUp3 {
241  0% {
242    transform: scale(1, 0.6);
243  }
244
245  100% {
246    transform: scale(1, 0.6);
247  }
248}
249
250@-webkit-keyframes barUp4 {
251  0% {
252    transform: scale(1, 0.8);
253  }
254
255  40% {
256    transform: scale(1, 0.8);
257  }
258
259  50% {
260    transform: scale(1, 0.4);
261  }
262
263  90% {
264    transform: scale(1, 0.4);
265  }
266
267  100% {
268    transform: scale(1, 0.8);
269  }
270}
271
272@keyframes barUp4 {
273  0% {
274    transform: scale(1, 0.8);
275  }
276
277  40% {
278    transform: scale(1, 0.8);
279  }
280
281  50% {
282    transform: scale(1, 0.4);
283  }
284
285  90% {
286    transform: scale(1, 0.4);
287  }
288
289  100% {
290    transform: scale(1, 0.8);
291  }
292}
293
294@-webkit-keyframes barUp5 {
295  0% {
296    transform: scale(1, 1);
297  }
298
299  40% {
300    transform: scale(1, 1);
301  }
302
303  50% {
304    transform: scale(1, 0.2);
305  }
306
307  90% {
308    transform: scale(1, 0.2);
309  }
310
311  100% {
312    transform: scale(1, 1);
313  }
314}
315
316@keyframes barUp5 {
317  0% {
318    transform: scale(1, 1);
319  }
320
321  40% {
322    transform: scale(1, 1);
323  }
324
325  50% {
326    transform: scale(1, 0.2);
327  }
328
329  90% {
330    transform: scale(1, 0.2);
331  }
332
333  100% {
334    transform: scale(1, 1);
335  }
336}