Animar elementos en una página web puede ayudarnos a expandir la experiencia de usuario, crear mayores interacciones y diferenciar un diseño. En esta ocasión, te enseñaremos cómo animar un spinner en CSS.
¿Qué es un spinner?
Un spinner es un recurso que nos permite comunicar que una aplicación o una parte de la aplicación está cargando. Los spinner pueden tener todo tipo de diseños, desde la típica barra curva que se mueve en círculos infinitamente, hasta ondas que cambian de tamaño.
Aunque los spinner pueden ser complejos, la mayoría tienen animaciones y diseños lo bastante sencillos como para que valga la pena que los hagas tú mismo.
Existen muchas librerías de animaciones en CSS desde donde puedes descargar decenas de animaciones e incluso ver su código directamente. Sin embargo, aprender a animar un spinner en CSS puede ayudarte tanto a mejorar tus habilidades de animación como a tener un diseño completamente único y personalizado.
¿Cómo animar un spinner en CSS?
Antes de animar un spinner en CSS, debemos crear los elementos que animaremos. Este proceso es tan sencillo que no es necesario siquiera crear un documento CSS, pues puedes definir los estilos directamente desde tu documento HTML usando el elemento <style>. Dentro de esta etiqueta puedes crear un elemento div que contenga las barras curvas del spinner.
En nuestro caso, queremos que este spinner esté compuesto por dos barras curvas en constante movimiento. Una manera muy simple de hacer esto es crear un círculo y definir el color de sus bordes por separado. Esto quiere decir que, en vez de definir el color directamente en el borde, usamos la propiedad border-color para definir los colores de las secciones del borde. A continuación te explicamos cómo lo escribiríamos:
<style>
.spinner {
width: 90px;
height: 90px;
border: 5px solid
border-radius: 50%
border-color: blueviolet transparent
}
Las líneas de código anteriores definen que tenemos un elemento con un diámetro de 90px y un borde solido de 5px. Lo que hace que este elemento sea un círculo es su propiedad border-radius. La propiedad border-color con dos colores hace que haya dos secciones que sean transparentes y dos secciones que sean de color blueviolet, creando dos barras curvas opuestas.
Ahora, podemos empezar a animar un spinner en CSS. Como en todas las animaciones, utilizaremos nuestra directiva @keyframes para determinar los estados del elemento. Un spinner como el nuestro solo necesita dos estados: el estado inicial del giro y el estado final. Para ello, podemos escribir las siguientes líneas de código:
@keyframes giro-completo {
from {
transform: rotate (0)
}
to {
transform: rotate (360)
}
Una vez definida la animación, solo necesitamos insertarla en el elemento que deseamos. Entonces, podemos insertar la propiedad animation: giro-completo en el selector de clase .spinner. Recuerda que las propiedades básicas a definir en una animación son el tiempo y la función de velocidad. Podemos escribir, entonces, la línea de código animation: giro-completo 1.5s linear infinite. Esta última propiedad es la animation-iteration-count, que al definirse como infinite crea una animación con repeticiones infinitas, ideal para un spinner.
¿Cómo seguir?
Ahora que sabes cómo animar un spinner en CSS, te invitamos a que sigas aprendiendo con nosotros. Por ello, queremos invitarte a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprendiendo sobre las posibilidades que tiene CSS para el diseño web y conocerás todo lo que necesitas para ser un experto del desarrollo web. ¡No lo pienses más e inscríbete ya!
