.loader {
  width: 12em;
  height: 3em;
  position: relative;
  overflow: hidden;
  border-bottom: 8px solid #000;
  filter: url(#goo);
}

.loader::before {
  content: '';
  width: 22em;
  height: 18em;
  background: #f00;
  position: absolute;
  border-radius: 50%;
  left: -2em;
  bottom: -18em;
  animation: wee1 2s linear infinite;
}

.loader::after {
  content: '';
  width: 16em;
  height: 12em;
  background: #0ff;
  position: absolute;
  border-radius: 50%;
  left: -4em;
  bottom: -12em;
  animation: wee2 2s linear infinite 0.75s;
}

@keyframes wee1 {
  0% {
    transform: translateX(-10em) rotate(0deg);
  }

  100% {
    transform: translateX(7em) rotate(180deg);
  }
}

@keyframes wee2 {
  0% {
    transform: translateX(-8em) rotate(0deg);
  }

  100% {
    transform: translateX(8em) rotate(180deg);
  }
}