<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%
	}
}