<div class='loader'></div>

@import 'compass/css3';

$n: 10;
$r: 1.5em;
$oa: -90deg;
$ba: 360deg/$n;
$hl: 2*$r;
$rc: $hl/sin(.5*$ba);
$ri: $hl/sin(.5*$ba);
$dx: $ri - 2*$r;
$sh: ();

@for $i from 0 to $n {
  $ca: $oa + $i*$ba;
  $sh: $sh, 
    $rc*cos($ca) $rc*sin($ca) currentcolor
}

body {
  display: grid;
  margin: 0;
  height: 100vh;
  filter: contrast(.65);
  
  &::before {
    padding: $rc + 2*$r;
    background: 
      linear-gradient(45deg, 
          #fafe92 9%, #ffb066, #ff9191, 
          #e679c8, #974bb5 91%);
    filter: contrast(1.5);
    content: ''
  }
}

div, ::before, ::after {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
}

.loader {
  display: grid;
  place-self: stretch;
  background: #000;
  filter: contrast(13);
  mix-blend-mode: multiply;
  
  &::before, &::after {
    padding: $r;
    border-radius: 50%;
    color: #fff;
    filter: blur(13px);
    content: ''
  }
  
  &::before {
    box-shadow: $sh
  }
  
  &::after {
    padding: 2*$r;
    background: currentcolor;
    animation: mov 3s ease-in-out infinite
  }
}

@keyframes mov {
  0%, 100% { transform: translatey(-$rc) }
  25% { transform: translatey($rc) }
  50% { transform: translate(-$dx) }
  75% { transform: translate($dx) }
}