CSS Loader - bordered dot

dabblet.css

/**
 * CSS Loader - bordered dot
 */

#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: 30px;
	position: relative;
	width: 30px;
}

#loader:before {
	animation-name: timer;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 7px double #aaa;
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 20px;
	left: 50%;
	margin: -10px 0 0 -10px;
	position: absolute;
	top: 50%;
	width: 20px;
}

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

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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