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); } }
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter