CSS Loader - timer

dabblet.css

/**
 * CSS Loader - timer
 */

#loader {
	animation-name: timer;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 2px solid #aaa;
	border-radius: 50%;
	box-sizing: border-box;
	height: 32px;
	position: relative;
	width: 32px;
}

#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: 14px;
	position: absolute;
	top: 13px;
	transform-origin: 0 50%;
	width: 10px;
}

@keyframes timer {
	from {
		transform: scale(1.0);
	}
	
	50% {
		transform: scale(1.2);
	}
	
	to {
		transform: scale(1.0);
	}
}

@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-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}