Loading Spinner in CSS

dabblet.css

@keyframes wheel {
    to { transform:rotate(360deg); }
}
.circularProgress:before {
	content: '';
	display: inline-block;
	width: 50px;
	height: 50px;
	background: 
		linear-gradient(0deg, transparent 49%, white 49%, white 51%, transparent 51%) 0 0px,
		linear-gradient(45deg, transparent 49%, white 49%, white 51%, transparent 51%) 25px -25px,
		linear-gradient(135deg, transparent 49%, white 49%, white 51%, transparent 51%) 25px -25px,
		linear-gradient(90deg, transparent 49%, white 49%, white 51%, transparent 51%),
		radial-gradient(white 42%, grey 42%, grey 70%, transparent 70%);
	clip: rect(auto, 25px, auto, auto);
	position: absolute; /* needed for clip */ 
}
	
.circularProgress {
	animation: wheel 1s steps(8, end) infinite;
	width: 50px;
	height: 50px;
	background: 
		linear-gradient(0deg, transparent 49%, white 49%, white 51%, transparent 51%) 0 -1px,
		linear-gradient(45deg, transparent 49%, white 49%, white 51%, transparent 51%) 25px -25px,
		linear-gradient(135deg, transparent 49%, white 49%, white 51%, transparent 51%) 25px -25px,
		linear-gradient(90deg, transparent 49%, white 49%, white 51%, transparent 51%) 0 0px,
		radial-gradient(white 42%, lightgrey 42%, lightgrey 70%, transparent 70%);
}

dabblet.html

<div class="circularProgress"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

Vad är det här? Nyfiken... :)

Försöker göra en Loading Spinner helt i CSS :)