1.loader {
2  position: relative;
3  display: flex;
4  gap: 0.3em;
5}
6
7.loader::before {
8  content: "";
9  position: absolute;
10  left: 0;
11  top: 0;
12  width: 100%;
13  height: 2em;
14  filter: blur(45px);
15  background-color: #e299ff;
16  background-image: radial-gradient(at 52% 57%, hsla(11,83%,72%,1) 0px, transparent 50%),
17  radial-gradient(at 37% 57%, hsla(175,78%,66%,1) 0px, transparent 50%);
18}
19
20.loader__circle {
21  --size__loader: 0.6em;
22  width: var(--size__loader);
23  height: var(--size__loader);
24  border-radius: 50%;
25  animation: loader__circle__jumping 2s infinite;
26  background-color: #b499ff;
27}
28
29.loader__circle:nth-child(2n) {
30  animation-delay: 300ms;
31  background-color: #e499ff;
32}
33
34.loader__circle:nth-child(3n) {
35  animation-delay: 600ms;
36}
37
38@keyframes loader__circle__jumping {
39  0%, 100% {
40    transform: translateY(0px);
41  }
42
43  25% {
44    transform: translateY(-15px) scale(0.5);
45  }
46
47  50% {
48    transform: translateY(0px);
49  }
50
51  75% {
52    transform: translateY(5px) scale(0.9);
53  }
54}