Como hacer un loader circular con css3

A continuación un ejemplo para realizar un efecto loading circular usando solo CSS. En este caso a un solo elemento con clase “loader-circular”:

.loader-circular {
	position: relative;
	height: 60px;
	width: 60px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #eee;
 
	-webkit-animation: animacion .6s linear 0s infinite;
	-moz-animation: animacion .6s linear 0s infinite;
	animation: animacion .6s linear 0s infinite;
}
.loader-circular:before,
.loader-circular:after {
	content: '';
	display: block;
	position: absolute;
}
.loader-circular:before {
	border-radius: 0 30px 30px 0;
	height: 60px;
	width: 50%;
	top: 0;
	right: 0;
 
	background-image: -webkit-linear-gradient(#eee, #aaa);
	background-image: -moz-linear-gradient(#eee, #aaa);
	background-image: linear-gradient(#eee, #aaa);
}
.loader-circular:after {
	border-radius: 50%;
	height: 50px;
	width: 50px;
	top: 50%;
	left: 50%;
	background-color: #fff;
 
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
}
 
@-webkit-keyframes animacion {
	to { -webkit-transform: rotate(360deg);	}
}
@-moz-keyframes animacion {
	to { -moz-transform: rotate(360deg); }
}
@keyframes animacion {
	to { transform: rotate(360deg);	}
}

aquí dejo una demo http://jsfiddle.net/Phpres/kfqmdrds/