1.loader {
2  width: 12em;
3  height: 3em;
4  position: relative;
5  overflow: hidden;
6  border-bottom: 8px solid #000;
7  filter: url(#goo);
8}
9
10.loader::before {
11  content: '';
12  width: 22em;
13  height: 18em;
14  background: #f00;
15  position: absolute;
16  border-radius: 50%;
17  left: -2em;
18  bottom: -18em;
19  animation: wee1 2s linear infinite;
20}
21
22.loader::after {
23  content: '';
24  width: 16em;
25  height: 12em;
26  background: #0ff;
27  position: absolute;
28  border-radius: 50%;
29  left: -4em;
30  bottom: -12em;
31  animation: wee2 2s linear infinite 0.75s;
32}
33
34@keyframes wee1 {
35  0% {
36    transform: translateX(-10em) rotate(0deg);
37  }
38
39  100% {
40    transform: translateX(7em) rotate(180deg);
41  }
42}
43
44@keyframes wee2 {
45  0% {
46    transform: translateX(-8em) rotate(0deg);
47  }
48
49  100% {
50    transform: translateX(8em) rotate(180deg);
51  }
52}