iamkevinv · December 4, 2013 04:09
diff --git a/dabblet.css b/dabblet.css
 /**
 * Just for fun™: Flickr spinner in pure CSS - Lea L
 */

 @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;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="flickr-spinner"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Just for fun™: Flickr spinner in pure CSS - Lea L
	*/

	@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;
	}