Loader by Li-Deheng

1.loader {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  --color: hsl(0, 0%, 87%);
6  --animation: 2s ease-in-out infinite;
7}
8
9.loader .circle {
10  display: flex;
11  align-items: center;
12  justify-content: center;
13  position: relative;
14  width: 20px;
15  height: 20px;
16  border: solid 2px var(--color);
17  border-radius: 50%;
18  margin: 0 10px;
19  background-color: transparent;
20  animation: circle-keys var(--animation);
21}
22
23.loader .circle .dot {
24  position: absolute;
25  transform: translate(-50%, -50%);
26  width: 16px;
27  height: 16px;
28  border-radius: 50%;
29  background-color: var(--color);
30  animation: dot-keys var(--animation);
31}
32
33.loader .circle .outline {
34  position: absolute;
35  transform: translate(-50%, -50%);
36  width: 20px;
37  height: 20px;
38  border-radius: 50%;
39  animation: outline-keys var(--animation);
40}
41
42.circle:nth-child(2) {
43  animation-delay: 0.3s;
44}
45
46.circle:nth-child(3) {
47  animation-delay: 0.6s;
48}
49
50.circle:nth-child(4) {
51  animation-delay: 0.9s;
52}
53
54.circle:nth-child(5) {
55  animation-delay: 1.2s;
56}
57
58.circle:nth-child(2) .dot {
59  animation-delay: 0.3s;
60}
61
62.circle:nth-child(3) .dot {
63  animation-delay: 0.6s;
64}
65
66.circle:nth-child(4) .dot {
67  animation-delay: 0.9s;
68}
69
70.circle:nth-child(5) .dot {
71  animation-delay: 1.2s;
72}
73
74.circle:nth-child(1) .outline {
75  animation-delay: 0.9s;
76}
77
78.circle:nth-child(2) .outline {
79  animation-delay: 1.2s;
80}
81
82.circle:nth-child(3) .outline {
83  animation-delay: 1.5s;
84}
85
86.circle:nth-child(4) .outline {
87  animation-delay: 1.8s;
88}
89
90.circle:nth-child(5) .outline {
91  animation-delay: 2.1s;
92}
93
94@keyframes circle-keys {
95  0% {
96    transform: scale(1);
97    opacity: 1;
98  }
99
100  50% {
101    transform: scale(1.5);
102    opacity: 0.5;
103  }
104
105  100% {
106    transform: scale(1);
107    opacity: 1;
108  }
109}
110
111@keyframes dot-keys {
112  0% {
113    transform: scale(1);
114  }
115
116  50% {
117    transform: scale(0);
118  }
119
120  100% {
121    transform: scale(1);
122  }
123}
124
125@keyframes outline-keys {
126  0% {
127    transform: scale(0);
128    outline: solid 20px var(--color);
129    outline-offset: 0;
130    opacity: 1;
131  }
132
133  100% {
134    transform: scale(1);
135    outline: solid 0 transparent;
136    outline-offset: 20px;
137    opacity: 0;
138  }
139}