1.loader {
2  flex-direction: row;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6}
7
8.circle {
9  width: 20px;
10  height: 20px;
11  background-color: #8BC6EC;
12  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
13  border-radius: 50%;
14  margin-right: 1rem;
15  animation: pulse 1.2s ease-in-out infinite;
16}
17
18.circle:nth-child(2) {
19  animation-delay: 0.2s;
20  background-color: #4158D0;
21  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
22}
23
24.circle:nth-child(3) {
25  animation-delay: 0.4s;
26  background-color: #0093E9;
27  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
28}
29
30.circle:nth-child(4) {
31  animation-delay: 0.6s;
32  background-color: #8EC5FC;
33  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
34}
35
36.circle:nth-child(5) {
37  animation-delay: 0.8s;
38  background-color: #00DBDE;
39  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
40}
41
42@keyframes pulse {
43  0% {
44    transform: scale(0.8);
45    opacity: 0.7;
46  }
47
48  50% {
49    transform: scale(1);
50    opacity: 1;
51  }
52
53  100% {
54    transform: scale(0.8);
55    opacity: 0.7;
56  }
57}