kizu · May 20, 2013 18:27
diff --git a/dabblet.css b/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;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="flickr-spinner2"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	/**
	* 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;
	}