CSS Loader - blocks II

dabblet.css

/**
 * CSS Loader - blocks II
 */

#loader {
	background: transparent;
	box-sizing: border-box;
	position: relative;
}

#loader:after,
#loader:before {
	animation-name: timer-left;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 0s;
	background: #fae;
	box-sizing: border-box;
	content: "";
	height: 8px;
	left: -10px;
	position: absolute;
	top: 2px;
	width: 8px;
}

#loader:after {
	animation-name: timer-right;
	animation-delay: 0.8s;
	background: #afe;
	left: 14px;
}

@keyframes timer-left {
	from, to {
		left: -10px
	}
	
	50% {
		left: 14px;
	}
}

@keyframes timer-right {
	from, to {
		left: 14px;
	}
	
	50% {
		left: -10px;
	}
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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