Loader by Ankesh2002

1.loader {
2  position: relative;
3  width: 164px;
4  height: 164px;
5}
6
7.loader::before , .loader::after {
8  content: '';
9  position: absolute;
10  width: 40px;
11  height: 40px;
12  background-color: #00bd26;
13  left: 50%;
14  top: 50%;
15  animation: rotate 1s ease-in infinite;
16}
17
18.loader::after {
19  width: 20px;
20  height: 20px;
21  background-color: #00bd26;
22  animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite;
23}
24
25@keyframes moveY {
26  0% , 100% {
27    top: 10%
28  }
29
30  45% , 55% {
31    top: 59%
32  }
33
34  60% {
35    top: 40%
36  }
37}
38
39@keyframes rotate {
40  0% {
41    transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)
42  }
43
44  25% {
45    transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)
46  }
47
48  45% , 55% {
49    transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)
50  }
51
52  60% {
53    transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)
54  }
55
56  75% {
57    transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)
58  }
59
60  100% {
61    transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)
62  }
63}
64