Loader by wztd

1.loader {
2  position: relative;
3  width: 1.5em;
4  aspect-ratio: 1/2;
5  filter: url(#goo);
6}
7
8#goo {
9  display: none
10}
11
12.loader:before, .loader:after {
13  content: '';
14  position: absolute;
15  inset: 0;
16  margin: auto;
17  width: 100%;
18  aspect-ratio: 1/1;
19  animation: 1.5s ease-out infinite loader;
20  border-radius: 50%;
21}
22
23.loader:before {
24  background: linear-gradient(rgb(255, 206, 58), rgb(66, 181, 73))
25}
26
27.loader:after {
28  animation-delay: 0.75s;
29  background: linear-gradient(to top, rgb(114, 223, 231), rgb(66, 181, 73))
30}
31
32@keyframes loader {
33  0%, 50%, 100% {
34    transform: translateY(0)
35  }
36
37  25% {
38    transform: translateY(70%)
39  }
40
41  75% {
42    transform: translateY(-70%)
43  }
44}