Spinner animado en CSS puro
Después de recrear la clásica barra de progreso usando sólo CSS, hoy vamos a hacer lo propio con uno de los indicadores de carga más usados en aplicaciones, los spinners. Si bien durante mucho tiempo han sido imágenes de tipo GIF, con las nuevas propiedades de CSS, esto ha cambiado radicalmente y la tendencia es realizar este tipo de animaciones mediante código, que sin duda es mucho más liviano.
Por esta razón vamos a construir un spinner, que va a ser muy básico, pero que queda muy bien para cualquier proceso de carga. Va a constar de dos círculos incompletos que giran en sentidos opuestos y con el que espero que te hagas una idea de lo que podemos llegar a conseguir con las propiedades animation, keyframes y transform.
Dibujando los círculos incompletos
Dibujar un círculo en CSS es algo muy sencillo que ya hemos visto en el artículo sobre la propiedad border-radius y sus posibilidades. Aunque en esta caso concreto no buscamos exactamente dibujar un círculo, sino mas bien una circunferencia, con lo cual necesitamos usar los bordes del elemento div que usamos como constructor, pero no al completo, sino únicamente tres de ellos.
Para esto sólo tenemos que aplicar un border-radius del 50% para conseguir que los bordes se curven para formar la circunferencia y dar como color el valor transparent a uno de los 4 bordes para dar la sensación de que este desaparece.
Por último haremos lo mismo para el otro círculo que va a ir anidado en su interior, para lo cual usaremos el pseudo-elemento ::before y lo posicionaremos con position:absolute en el lugar exacto.
.spinner {
position: relative;
width: 6em;
height: 6em;
border-top: 1em solid #eb7260;
border-right: 1em solid #eb7260;
border-bottom: 1em solid #eb7260;
border-left: 1em solid transparent;
border-radius: 50%;
}
.spinner:before {
position: absolute;
top: 0;
left: 0;
width: 4em;
height: 4em;
border-top: 1em solid #77c5f7;
border-right: 1em solid #77c5f7;
border-bottom: 1em solid #77c5f7;
border-left: 1em solid transparent;
border-radius: 50%;
}
Haciéndolos girar
Para la animación de los círculos vamos a necesitar las propiedades keyframes y animation con la ayuda de transform, así que sino las conoces muy bien te recomiendo leas el artículo que les dediqué a ellas, porque en este tutorial no vamos a ver como funcionan sino un ejemplo práctico de lo que podemos hacer con ellas.
El proceso es muy sencillo. Haremos que ambos círculos giren indefinidamente a lo largo del tiempo, y los haremos girar 360 grados a la derecha y 360 grados a la izquierda con la propiedad transform.
Sólo debemos tener en cuenta una cosa, y es que en el DOM el pseudo-elemento ::before se crea como hijo del div que usamos para crear el primer círculo, con lo que al animar este animaremos los dos al mismo tiempo. Para conseguir que nuestro segundo círculo gire en sentido contrario su tiempo de animación deber ser menor, ya que si es mayor girará en el mismo sentido aunque más despacio y si es igual, ambas animaciones se contrarrestarán y por tanto no girará.
.spinner {
animation: loading 1s linear infinite;
}
.spinner:before {
animation: loading2 .5s linear infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes loading2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
Es aconsejable que cuando uses las propiedades de animación uses los prefijos para asegurarte la compatibilidad en los diferentes navegadores, en el ejemplo no los he usado para no alargar tanto el código, pero en el pen que te dejo al final de este tutorial, sí.
See the Pen Spinner doble en CSS puro by amram (@amram1977) on CodePen.