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

@import 'compass/css3';

$c2: #A2CCB6;
$c1: #FCEEB5;
$c0: #EE786E;
$sl: $c0, $c1, $c1, $c0, $c0;
$u: 3.25em; /* slice width */
$n: 4; /* number of slices */
$d: $n*$u; /* loader dimensions, no padding */
$a: 9deg; /* half the angle corresp to an edge arc */
$p: .5*$d*(cos($a) - 1)/(1 - cos($a) - sin($a)); /* padding */
$rc: (.5*$d + $p)/sin($a); /* radius of circle edge arc is on */
$s: 2*$rc; /* mask size */
$f: $d + 2*$p; /* full loader dimensions incl paddings */
$o: .65; /* background hash opacity */ 

body {
  margin: 0;
  height: 100vh;
  perspective: 20em;
  background: 
    repeating-linear-gradient(45deg, 
        rgba($c0, $o) 0, rgba($c0, $o) 2px, transparent 0, transparent 7px), 
    repeating-linear-gradient(-45deg, 
        rgba($c1, $o) 0, rgba($c1, $o) 2px, transparent 0, transparent 7px)
    $c2;
  background-blend-mode: overlay
}

.loader {
  top: 50%; left: 50%;
  position: absolute;
  transform: rotate(-45deg);
  transform-style: preserve-3d;
  
  &:before, &:after {
    --i: 0;
    --s: calc(1 - 2*var(--i));
    position: absolute;
    margin: -.5*$f;
    padding: $p;
    width: $d; height: $d;
    transform: scaley(var(--s)) rotatey(0deg);
    background: linear-gradient(90deg, $sl) calc(var(--s)*#{2*$f}) 50%/ #{4*$f} 100%;
    --g: radial-gradient(closest-side, red calc(100% - 1px), transparent 100%);
    mask: 
      linear-gradient(red $p + $u, transparent 0, 
          transparent $p + 2*$u, red 0, 
          red $p + 3*$u, transparent 0) intersect, 
      linear-gradient(red, red) exclude, 
      var(--g) 50% #{$p - $s} add, 
      var(--g) 50% #{$d + $p}, 
      var(--g) #{$p - $s} 50%, 
      var(--g) #{$d + $p} 50%;
    mask-size: #{$s} #{$s};
    mask-repeat: no-repeat;
    animation: ani 1s ease-in-out infinite;
    content: ''
  }
  
  &:after { --i: 1 }
}

@keyframes ani { 
  0% {
    transform: scaley(var(--s)) rotatey(calc(var(--s)*.5turn));
    background-position: 0px 50%
  }
}