1.loader {
2  box-sizing: border-box;
3  position: relative;
4  display: block;
5  width: 60px;
6  height: 22px;
7  border: 2px solid;
8  border-radius: 3px;
9  margin-left: -3px
10}
11
12.loader::after,
13.loader::before {
14  content: "";
15  display: block;
16  box-sizing: border-box;
17  position: absolute;
18  height: 12px;
19  background: currentColor;
20  top: 3px
21}
22
23.loader::before {
24  right: -4px;
25  border-radius: 3px;
26  width: 4px
27}
28
29.loader::after {
30  width: 1px;
31  left: 3px;
32  animation: full 2s ease-in-out infinite;
33}
34
35@keyframes full {
36  20% {
37    background-color: red
38  }
39
40  45% {
41    background-color: yellow;
42  }
43
44  to {
45    width: 50px;
46    background-color: greenyellow;
47  }
48}