CSS3: Loader circular

Hace años era muy típico usar imágenes (gifs) en las pre-cargas de las webs, etc.. para crear ese efecto de «cargando…»

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;
	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: linear-gradient(#eee, #aaa);
}
.loader-circular:after {
	border-radius: 50%;
	height: 50px;
	width: 50px;
	top: 50%;
	left: 50%;
	background-color: #fff;
	transform: translate(-50%, -50%);
	
}

@keyframes animacion {
	to { transform: rotate(360deg);	}
}

Resultado:

Este es solo un ejemplo para mostrar lo fácil que es crearlo solo CSS… puedes editar este código a tu gusto (para modificar su posición, tamaño, colores, velocidad, etc)