1.loader {
2  position: relative;
3  width: 600px;
4  height: 600px;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8}
9
10.circle {
11  position: absolute;
12  border-radius: 50%;
13  animation-duration: 1.5s;
14  animation-iteration-count: infinite;
15  animation-timing-function: linear;
16}
17
18.circle-1 {
19  width: 60px;
20  height: 60px;
21  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.1855) 0%, rgba(68, 253, 38, 0.196) 100%);
22  animation-name: circle-1-animation;
23}
24
25.circle-3 {
26  width: 40px;
27  height: 40px;
28  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
29  animation-name: circle-3-animation;
30}
31
32.circle-4 {
33  width: 20px;
34  height: 20px;
35  background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);
36  animation-name: circle-4-animation;
37}
38
39@keyframes circle-1-animation {
40  0% {
41    transform: scale(1);
42  }
43
44  50% {
45    transform: scale(1.2);
46  }
47
48  100% {
49    transform: scale(1);
50  }
51}
52
53@keyframes circle-2-animation {
54  0% {
55    transform: scale(1);
56  }
57
58  50% {
59    transform: scale(1.2);
60  }
61
62  100% {
63    transform: scale(1);
64  }
65}
66
67@keyframes circle-3-animation {
68  0% {
69    transform: scale(1);
70  }
71
72  50% {
73    transform: scale(1.2);
74  }
75
76  100% {
77    transform: scale(1);
78  }
79}
80
81@keyframes circle-4-animation {
82  0% {
83    transform: scale(1);
84  }
85
86  50% {
87    transform: scale(1.2);
88  }
89
90  100% {
91    transform: scale(1);
92  }
93}
94