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

@import 'compass/css3';

$f: .8;
$r-outer: 7.5em;
$d-outer: 2*$r-outer;
$r-inner: $f*$r-outer;
$d-start: 2*($r-outer - $r-inner);
$r-start: .5*$d-start;
$a: asin($r-start/$r-inner)*180deg/pi();
$c: #632f53, #d11e48, #f4dd51, #a1c5ab, #fde6bd;

body {
	display: grid;
	place-content: center;
	margin: 0;
	min-height: 100vh;
	background: 
		repeating-linear-gradient(45deg, #000 0 2px, transparent 0 7px), 
		url(https://images.unsplash.com/photo-1515362790300-999394721afc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 0/ cover;
}

.loader {
	display: grid;
	grid-template: #{$d-outer}/ #{$d-outer};
	animation: r 2.5s linear infinite;
	
	&:before, &:after {
		--i: 0;
		grid-column: 1;
		grid-row: 1;
		border-radius: 50%;
		transform: 
			rotate(calc(var(--i)*180deg));
		background: 
			radial-gradient(circle at 50% $r-start, 
					nth($c, 1) calc(#{$r-start} - 1px), transparent $r-start), 
			conic-gradient(nth($c, 1) $a, 
					rgba(nth($c, 2), .7), rgba(nth($c, 3), .5), rgba(nth($c, 4), .3), 
					rgba(nth($c, 5), .1), rgba(nth($c, 5), 0) 180deg);
		--mask:  
			radial-gradient(circle at 50% #{$d-start + $r-inner}, 
				transparent $r-inner, red calc(#{$r-inner} + 1px));
		-webkit-mask: var(--mask);
						mask: var(--mask);
		content: ''
	}

	&:after { --i: 1 }
}

@keyframes r { 0% { transform: rotate(1turn) } }