(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.5em;
	left: 2.25em; /* (container width - part width)/2  */
	width: .5em;
	height: .5em;
	border-radius: 0.2em;
	box-shadow:
		 0.00em 0.50em #555,
		 0.00em 0.75em #555,
		 0.00em 1.00em #555,
		 0.00em 1.25em #555,
		 0.00em 1.50em #555,
		-1.25em 2.75em #999,
		-1.50em 2.75em #999,
		-1.75em 2.75em #999,
		-2.00em 2.75em #999,
		-2.25em 2.75em #999,
		 0.00em 4.00em #eee,
		 0.00em 4.25em #eee,
		 0.00em 4.50em #eee,
		 0.00em 4.75em #eee,
		 0.00em 5.00em #eee,
		 1.25em 2.75em #eee,
		 1.50em 2.75em #eee,
		 1.75em 2.75em #eee,
		 2.00em 2.75em #eee,
		 2.25em 2.75em #eee;
	transform-origin: -0.50em 2.5em; /* container height / 2 */
}

.progress:after {
	box-shadow:
		-0.50em 0.00em #777,
		-0.50em 0.25em #777,
		-0.50em 0.50em #777,
		-0.50em 0.75em #777,
		-0.50em 1.00em #777,
		-1.25em 2.75em #bbb,
		-1.50em 2.75em #bbb,
		-1.75em 2.75em #bbb,
		-2.00em 2.75em #bbb,
		-2.25em 2.75em #bbb,
		 0.00em 4.00em #eee,
		 0.00em 4.25em #eee,
		 0.00em 4.50em #eee,
		 0.00em 4.75em #eee,
		 0.00em 5.00em #eee,
		 1.25em 2.75em #eee,
		 1.50em 2.75em #eee,
		 1.75em 2.75em #eee,
		 2.00em 2.75em #eee,
		 2.25em 2.75em #eee;
	transform: rotate(-45deg);
}

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"}