CSS Loader - timer without pulse

dabblet.css

/**
 * CSS Loader - timer without pulse
 */

#loader {
	border: 3px solid #aaa;
	border-radius: 50%;
	box-sizing: border-box;
	height: 48px;
	position: relative;
	width: 48px;
}

#loader:before {
	animation-name: loader;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background: #bbb;
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	left: 20px;
	position: absolute;
	top: 19px;
	transform-origin: 0 50%;
	width: 18px;
}

#loader:after {
	animation-name: loader;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background: #bbb;
	border-radius: 2px;
	content: "";
	display: block;
	height: 4px;
	left: 20px;
	position: absolute;
	top: 18px;
	transform-origin: 0 50%;
	width: 14px;
}

@keyframes loader {
	from {
		transform: rotateZ(0deg);
	}
	
	to {
		transform: rotateZ(360deg);
	}
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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