CSS loader I

dabblet.css

/**
 * CSS loader I
 */

#loader {
	animation-name: loading;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background: #ccc;
	border-radius: 50%;
	border-left: 0px solid #d44;
	border-right: 0px solid #d44;
	box-sizing: border-box;
	height: 20px;
	margin: 100px;
	width: 20px;
}

@keyframes loading {
	from {
		border-left: 20px solid #d44;
	}
	
	50% {
		border-left: 0px solid #d44;
	}
	
	51% {
		border-right: 0px solid #d44;
	}
	
	to {
		border-right: 20px solid #d44;
	}
}

dabblet.html

<div id="loader"></div>

dabblet.js

// alert('Hello world!');

settings.json

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