(C)Leanest CSS spinner ever

dabblet.css

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	margin: 0 .5em;
	font-size: 12px;
	text-indent: 999em;
	overflow: hidden;
	animation: spin 1s infinite steps(8);
}

.small.progress {
	font-size: 6px;
}

.large.progress {
	font-size: 24px;
}

.progress:before,
.progress:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2.25em; /* (container width - part width)/2  */
	width: .5em;
	height: .5em;
	background: #555;
	box-shadow:
		0 .5em #555,
		0 1em #555,
		-1.25em 2.25em #999,
		-1.75em 2.25em #999,
		-2.25em 2.25em #999,
		0 3.5em #eee,
		0 4em #eee,
		0 4.5em #eee,
		1.25em 2.25em #eee,
		1.75em 2.25em #eee,
		2.25em 2.25em #eee;
	transform-origin: 50% 2.5em; /* container height / 2 */
}

.progress:after {
	background: #777;
	transform: rotate(-45deg);
	box-shadow:
		0 .5em #777,
		0 1em #777,
		-1.25em 2.25em #bbb,
		-1.75em 2.25em #bbb,
		-2.25em 2.25em #bbb,
		0 3.5em #eee,
		0 4em #eee,
		0 4.5em #eee,
		1.25em 2.25em #eee,
		1.75em 2.25em #eee,
		2.25em 2.25em #eee;
}

dabblet.html

<div class="small progress">Loading…</div>

<div class="progress">Loading…</div>

<div class="large progress">Loading…</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}