Se explica cómo crear un loader con solo CSS con una sencilla animación.

En esta entrada veremos cómo realizar una sencilla animación con solo CSS como la mostrada en el inicio de esta entrada; es una animación bastante sencilla de realizar y su estructura sigue la misma idea que la mostrada en otras entradas anteriores:

• Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs
• Transformando un botón de un estado a otro con CSS

Dicho esto, se requieren de dos partes para realizar esta estructura; un simple div para la circunferencia hueca:

.circulo{
width:70px;
height:70px;
border-radius:50%;
border:5px solid rgb(204, 0, 0);
margin: 0 auto;
}

Y dibujar el contenedor extra de la siguiente manera:

.circulo:after{
	content:' ';
	width:20px;
	height:20px;
	background:rgb(204, 0, 0);
	display:block;
	border-radius:50%;
}

Importante el uso del display:block para mostrar este contenedor extra.

Con esto tenemos casi todo listo, ahora nos falta crear la animación y con esto tendremos nuestro loader CSS 100% funcional.

Creando la animación con keyframes

La animación CSS es muy sencilla, con tan solo indicar la rotación mediante la propiedad transform tenemos listo el loader:

@keyframes rotar { 100% { transform: rotate(360deg); transform:rotate(360deg); } }