1.loader {
2  --ballcolor: #f2f2f2;
3  --shadow: 0px 0 #ffffff00;
4  --shadowcolor: #ffffff00;
5  width: 10px;
6  height: 10px;
7  left: -120px;
8  border-radius: 50%;
9  position: relative;
10  color: var(--ballcolor);
11  animation: shadowRolling 2s linear infinite;
12}
13
14@keyframes shadowRolling {
15  
16  0% {
17    box-shadow: var(--shadow),
18        var(--shadow),
19        var(--shadow),
20        var(--shadow);
21  }
22
23  12% {
24    box-shadow: 100px 0 var(--ballcolor),
25        var(--shadow),
26        var(--shadow), 
27        var(--shadow);
28  }
29
30  25% {
31    box-shadow: 110px 0 var(--ballcolor),
32        100px 0 var(--ballcolor),
33        var(--shadow), 
34        var(--shadow);
35  }
36
37  36% {
38    box-shadow: 120px 0 var(--ballcolor), 
39        110px 0 var(--ballcolor), 
40        100px 0 var(--ballcolor), 
41         var(--shadow);
42  }
43
44  50% {
45    box-shadow: 130px 0 var(--ballcolor),
46        120px 0 var(--ballcolor),
47        110px 0 var(--ballcolor),
48        100px 0 var(--ballcolor);
49  }
50
51  62% {
52    box-shadow: 200px 0 var(--shadowcolor),
53         130px 0 var(--ballcolor), 
54         120px 0 var(--ballcolor), 
55         110px 0 var(--ballcolor);
56  }
57
58  75% {
59    box-shadow: 200px 0 var(--shadowcolor),
60        200px 0 var(--shadowcolor),
61        130px 0 var(--ballcolor), 
62        120px 0 var(--ballcolor);
63  }
64
65  87% {
66    box-shadow: 200px 0 var(--shadowcolor), 
67        200px 0 var(--shadowcolor), 
68        200px 0 var(--shadowcolor), 
69        130px 0 var(--ballcolor);
70  }
71
72  100% {
73    box-shadow: 200px 0 var(--shadowcolor), 
74        200px 0 var(--shadowcolor),
75        200px 0 var(--shadowcolor),
76        200px 0 var(--shadowcolor);
77  }
78}