.loader
	- for (var x = 1; x < 10; x++)
		.loader-ring

$base: 25;
$inc: 25;
$border: 2px;
$duration: 1500ms;
$stagger: 50ms;
$easing: cubic-bezier(0.680, -0.750, 0.265, 1.750);

.loader {
	background: #000;
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
}

.loader-ring {
	animation: spin $duration $easing infinite forwards;
	border-radius: 50%;
	border: $border solid transparent;
	border-top-color: #fff;
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	@for $i from 1 through 100 {
		&:nth-child( #{ $i } ) {
			animation-delay: ( $i ) * $stagger;
			height: $base + ( $i - 1px ) * $inc;
			width: $base + ( $i - 1px ) * $inc;
		}
	}
}

@keyframes spin {
	100% { transform: rotate( 360deg ); }
}