Loader by bociKond

1.spinner {
2  position: relative;
3  width: 24.6px;
4  height: 24.6px;
5  animation-name: rotateSpin;
6  animation-duration: 2s;
7  animation-timing-function: ease-in-out;
8  animation-iteration-count: infinite;
9  animation-direction: normal;
10  --clr: #3E885B;
11}
12
13@keyframes rotateSpin {
14  0% {
15    transform: rotate(0deg);
16  }
17
18  100% {
19    transform: rotate(360deg);
20  }
21}
22
23.spinner div {
24  width: 100%;
25  height: 100%;
26  background-color: var(--clr);
27  border-radius: 50%;
28  animation: spinnerAni 1s infinite backwards;
29}
30
31.spinner div:nth-child(1) {
32  animation-delay: 0.12s;
33  background-color: var(--clr);
34  opacity: .9;
35}
36
37.spinner div:nth-child(2) {
38  animation-delay: 0.24s;
39  background-color: var(--clr);
40  opacity: .8;
41}
42
43.spinner div:nth-child(3) {
44  animation-delay: 0.36s;
45  background-color: var(--clr);
46  opacity: .7;
47}
48
49.spinner div:nth-child(4) {
50  animation-delay: 0.48s;
51  background-color: var(--clr);
52  opacity: .6;
53}
54
55.spinner div:nth-child(5) {
56  animation-delay: 0.60s;
57  background-color: var(--clr);
58  opacity: .5;
59}
60
61@keyframes spinnerAni {
62  0% {
63    transform: rotate(0deg) translateY(-200%);
64  }
65
66  60%, 100% {
67    transform: rotate(360deg) translateY(-200%);
68  }
69}