dziudek · May 16, 2013 11:14
diff --git a/dabblet.css b/dabblet.css
 /**
 *
 * CSS loader III
 *
 **/

 #loader {
 	animation-name: loader;
 	animation-duration: 2s;
 	animation-iteration-count: infinite;
 	animation-direction: reverse;
 	animation-timing-function: linear;
 	background: #ee6;
 	background-clip:content-box;
 	border: 8px dotted #ee6;
 	border-radius: 50%;
 	box-sizing: border-box;
 	float: left;
 	height: 52px;
 	position: relative;
 	width: 52px;
 }

 @keyframes loader {
 	from {
 		transform: rotateZ(0deg);
 		border-width: 6px;
 	}
 	
 	50% {
 		transform: rotateZ(180deg);
 		border-width: 8px;
 	}
 	
 	to {
 		transform: rotateZ(360deg);
 		border-width: 6px;
 	}
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div id="loader"></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":"css"}
	/**
	*
	* CSS loader III
	*
	**/

	#loader {
	animation-name: loader;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-timing-function: linear;
	background: #ee6;
	background-clip:content-box;
	border: 8px dotted #ee6;
	border-radius: 50%;
	box-sizing: border-box;
	float: left;
	height: 52px;
	position: relative;
	width: 52px;
	}

	@keyframes loader {
	from {
	transform: rotateZ(0deg);
	border-width: 6px;
	}

	50% {
	transform: rotateZ(180deg);
	border-width: 8px;
	}

	to {
	transform: rotateZ(360deg);
	border-width: 6px;
	}
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="loader"></div>