Creando un loader animado con solo CSS

12-09-2016 - Andrés Cruz

Creando un loader animado con solo CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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:

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

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!