1.loader {
2  display: flex;
3  gap: 10px;
4}
5
6.loader span {
7  height: 20px;
8  width: 20px;
9  background-image: linear-gradient(to right , #333 , #233,#222,#122,#112,#111,#011,#001,#000);
10  border-radius: 50%;
11  animation-name: animar;
12  animation-duration: 3s;
13  animation-iteration-count: infinite;
14  box-shadow: 20px 20px 18px #666666,
15             -20px -20px 18px #ffffff;
16}
17
18#one {
19  animation-delay: 1s;
20}
21
22#two {
23  animation-delay: 2s;
24}
25
26#three {
27  animation-delay: 3s;
28}
29
30@keyframes animar {
31  0% {
32    transform: scale(1);
33  }
34
35  33% {
36    transform: scale(.3);
37  }
38
39  66% {
40    transform: scale(1);
41  }
42
43  100% {
44    transform: scale(1);
45  }
46}