CSS Loader - blocks

dabblet.css

/**
 * CSS Loader - blocks
 */

#loader {
	animation-name: timer;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background: transparent;
	border-bottom: 32px solid #aaa;
	box-sizing: border-box;
	height: 32px;
	margin: 0 0 0 12px;
	position: relative;
	width: 8px;
}

#loader:after,
#loader:before {
	animation-name: timer;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 0.5s;
	background: transparent;
	border-bottom: 32px solid #aaa;
	box-sizing: border-box;
	content: "";
	height: 32px;
	left: -12px;
	position: absolute;
	top: 0;
	width: 8px;
}

#loader:after {
	animation-delay: 0.25s;
	left: 12px;
}

@keyframes timer {
	from {
		border-bottom-width: 32px;
	}
	
	50% {
		border-bottom-width: 15px;	
	}
	
	to {
		border-bottom-width: 32px;	
	}
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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