Loader by SmookyDev

1.center_div {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  margin: 5px;
6}
7
8.wave {
9  width: 1.8rem;
10  height: 150px;
11  background-color: #ff6b6b;
12  margin: 0 4px;
13  border-radius: 0.4rem;
14  animation: wave 1.5s linear infinite;
15  transform-origin: center;
16}
17
18@keyframes wave {
19  0% {
20    transform: scale(0);
21    filter: hue-rotate(90deg) blur(100px);
22  }
23  25% {
24    transform: scale(0);
25    filter: hue-rotate(120deg) blur(50px);
26  }
27  50% {
28    transform: scale(1);
29    filter: hue-rotate(180deg) blur(25px);
30  }
31  25% {
32    transform: scale(0);
33    filter: hue-rotate(360deg) blur(2px);
34  }
35  100% {
36    transform: scale(0);
37    filter: hue-rotate(0deg) blur(0);
38  }
39}
40
41.wave:nth-child(2) {
42  animation-delay: 0.1s;
43}
44
45.wave:nth-child(3) {
46  animation-delay: 0.2s;
47}
48
49.wave:nth-child(4) {
50  animation-delay: 0.3s;
51}
52
53.wave:nth-child(5) {
54  animation-delay: 0.4s;
55}
56
57.wave:nth-child(6) {
58  animation-delay: 0.5s;
59}
60
61.wave:nth-child(7) {
62  animation-delay: 0.6s;
63}
64
65.wave:nth-child(8) {
66  animation-delay: 0.7s;
67}
68
69.wave:nth-child(9) {
70  animation-delay: 0.8s;
71}
72
73.wave:nth-child(10) {
74  animation-delay: 0.9s;
75}
76