Just for fun™: Flickr spinner in pure CSS

dabblet.css

/**
 * Just for fun™: Flickr spinner in pure CSS
 * Now, with wider browser support!
 */

@keyframes move-right {
	to { right: 0; }
}

@keyframes move-padding {
	to { padding-left: 1em; }
}

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

.flickr-spinner2 {
	position: relative;
	width: 2em;
	height: 1em;
	left: 0;
	right: 50%;
	box-sizing: border-box;
	animation: move-right   1s infinite alternate-reverse,
	           move-padding 1s infinite alternate,
	           cover  1s -0.5s infinite alternate-reverse;
}

.flickr-spinner2:before,
.flickr-spinner2:after {
	content: '';
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
	border-radius: 50%;
}

.flickr-spinner2:before {
	background: #0063dc;
	left: auto;
	right: inherit;
	z-index: inherit;
}

.flickr-spinner2:after {
	background: #ff0084;
	left: auto;
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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