.background
  .loader.loader-left
  .loader.loader-right
  svg(xmlns='http://www.w3.org/2000/svg', version='1.1')
      defs
        filter#goo
          fegaussianblur(in='SourceGraphic', stddeviation='15', result='blur', color-interpolation-filters="sRGB")
          fecolormatrix(in='blur', mode='matrix', values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -7', result='goo', color-interpolation-filters="sRGB")
          feblend(in='SourceGraphic', in2='goo', color-interpolation-filters="sRGB")

$blue: #2E86FF;
$red: #FC3164;

$animtime: 2s;
$easing: cubic-bezier(.35, 0, .25, 1);

.background {
  // -webkit-filter:url('#goo');
  filter:url('#goo');
  width: 100vw;
  height: 100vh;
  position: relative;
}
.loader {
  // -webkit-filter:url('#goo');
  // filter:url('#goo');
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: calc(50% - 2rem / 2);
  left: calc(50% - 2rem / 2);
  background: $blue;
  border-radius: 2rem;
}
.loader-left {
  animation: rotateLeft $animtime $easing infinite, changeColor $animtime $easing infinite;
}
.loader-right {
  animation: rotateRight $animtime $easing infinite, changeColor $animtime $easing infinite;
}

@keyframes rotateLeft {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform-origin: -50% -50%;
  }
}

@keyframes rotateRight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform-origin: 150% 150%;
  }
}

@keyframes changeColor {
  0%, 100% {
    background: $blue;
  }
  50% {
    background: $red;
  }
}