1.loader {
2  width: 16px;
3  height: 16px;
4  box-shadow: 0 30px, 0 -30px;
5  border-radius: 4px;
6  background: currentColor;
7  display: block;
8  position: relative;
9  transform: translate(-150%, -20px);
10  color: #FFF;
11  box-sizing: border-box;
12  animation: animloader 2s ease infinite;
13}
14
15.loader::after,
16.loader::before {
17  content: '';
18  box-sizing: border-box;
19  width: 16px;
20  height: 16px;
21  box-shadow: 0 30px, 0 -30px;
22  border-radius: 4px;
23  background: currentColor;
24  color: #FFF;
25  position: absolute;
26  left: 30px;
27  top: 0;
28  animation: animloader 2s 0.2s ease infinite;
29}
30
31.loader::before {
32  animation-delay: 0.4s;
33  left: 60px;
34}
35
36@keyframes animloader {
37  0% {
38    top: 0;
39    color: white;
40  }
41
42  50% {
43    top: 30px;
44    color: rgba(255, 255, 255, 0.2);
45  }
46
47  100% {
48    top: 0;
49    color: white;
50  }
51}
52