CSS3 Animation Loader

by Alex

HTML

<h2>Normal Loader</h2>
<div class="loader normal"></div>
<hr>
<h2>Alternate Loader</h2>
<div class="loader alternate"></div>

CSS

html {
    font-family: sans-serif;
}
.loader {
	background: #000;
	width: 6px;
	height: 6px;
	display: block;
	margin: 10px auto;
	box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	border-radius: 50%;
}
.loader.normal {
    -webkit-animation: loader .6s infinite ease;
	animation: loader .6s infinite ease;
}
.loader.alternate {
    -webkit-animation: loader .6s infinite ease alternate;
	animation: loader .6s infinite ease alternate;
}
@-webkit-keyframes loader {
	0% {
		box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	}
	14% {
		box-shadow: -40px 0 1px 2px rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	}
	28% {
		box-shadow: -40px 0 1px 4px rgba(0,0,0,1),
				-20px 0 1px 2px rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	}
	43% {
		box-shadow: -40px 0 1px 2px rgba(0,0,0,1),
				-20px 0 1px 4px rgba(0,0,0,1),
				0 0 1px 2px rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	}
	57% {
		box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 1px 2px rgba(0,0,0,1),
				0 0 1px 4px rgba(0,0,0,1),
				20px 0 1px 2px rgba(0,0,0,1),
				40px 0 0 0 rgba(0,0,0,1);
	}
	71% {
		box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 1px 2px rgba(0,0,0,1),
				20px 0 1px 4px rgba(0,0,0,1),
				40px 0 1px 2px rgba(0,0,0,1);
	}
	86% {
		box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 1px 2px rgba(0,0,0,1),
				40px 0 1px 4px rgba(0,0,0,1);
	}
	100% {
		box-shadow: -40px 0 0 0 rgba(0,0,0,1),
				-20px 0 0 0 rgba(0,0,0,1),
				0 0 0 0 rgba(0,0,0,1),
				20px 0 0 0 rgba(0,0,0,1),
				40px 0 1px 2px...