Just for fun™: Flickr spinner in pure CSS

dabblet.css

/**
 * Just for fun™: Flickr spinner in pure CSS
 */

@keyframes move {
	to { left: 50%; }
}

@keyframes cover {
	from,49.9% { z-index: 1 }
	50.1%, to { z-index: 0 }
}

.flickr-spinner {
	width: 2em;
	height: 1em;
	position: relative;
}

.flickr-spinner:before,
.flickr-spinner:after {
	content: '';
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
	border-radius: 50%;
	animation: cover 2s infinite reverse,
	           move 1s infinite alternate;
}

.flickr-spinner:before {
	background: #0063dc;
	animation-direction: normal, alternate-reverse;
}

.flickr-spinner:after {
	background: #ff0084;
}

dabblet.html

<div class="flickr-spinner"></div>

dabblet.js

// alert('Hello world!');

settings.json

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