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

$r-dot: 1em;
$d-dot: 2*$r-dot;
$l-pad: 6.25*$r-dot;

body {
	display: grid;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #000;
	
	&::before {
		padding: $l-pad + $r-dot;
		background: radial-gradient(#e56589 $l-pad - 3*$r-dot, #6c97c3 $l-pad - $d-dot);
		content: ''
	}
	
	&::after {
		position: absolute;
		top: calc(50% + #{$l-pad}); left: 50%;
		transform: translate(-50%);
		color: rgba(#fff, .5);
		font: 200 1.5em/ 1.25 sans-serif;
		letter-spacing: 1px;
		text-transform: uppercase;
		animation: f 1s ease-in-out infinite alternate;
		content: 'loading'
	}
}

@keyframes f { to { opacity: 0 } }

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

.loader {
	display: grid;
	padding: $d-dot;
	background: inherit;
	filter: contrast(9);
	mix-blend-mode: multiply;
	
	&::before, &::after {
		padding: $l-pad;
		--stops: #fff calc(#{$r-dot} - 1px), transparent #{$r-dot}; 
		background: 
			radial-gradient(circle at $r-dot, var(--stops)), 
			radial-gradient(circle at 50% $r-dot, var(--stops)), 
			radial-gradient(circle at calc(100% - #{$r-dot}), var(--stops)), 
			radial-gradient(circle at 50% calc(100% - #{$r-dot}), var(--stops));
	filter: blur(9px);
		animation: a .875s ease-in-out infinite;
		content: ''
	}

	&::before { animation-name: b }
}

@keyframes a { 33.33%, 66.67% { padding: $r-dot } }

@keyframes b {
	33.33% { transform: rotate(0deg) }
	66.67%, 100% { transform: rotate(90deg) }
}