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); } }