Los spinners, esos típicos símbolos que nos muestran que estamos a la espera de algún proceso de carga, han sido durante mucho tiempo imágenes tipo GIF. Pero CSS le ha comido casi todo el terreno. Con las propiedades animation, transform y keyframes, las posibilidades son infinitas.

En este tutorial vamos a como construir un spinner muy básico, pero que a mí me gusta muchísimo, consistente en un círculo incompleto que gira sin parar. A partir de este ejemplo, espero que os hagáis una idea de lo fácil que es.

Pasos

1

Crear el círculo incompleto

Si recordamos como crear un círculo, la idea consiste básicamente en crear una caja cuadrada con el ancho y el alto que queramos y luego aplicar un border-radius del 50% para que los bordes se curven hasta formar el círculo.

Cada uno de los cuatro bordes de la caja inicial, es ahora un 25% del borde del círculo. Si le aplicamos un color diferente a uno de los bordes, conseguimos el círculo incompleto.

En este ejemplo, he elegido un mismo color para los cuatro bordes, pero el izquierdo lo he hecho semi-tranparente reduciéndole la opacidad; esto le dará un toque más de animación si utilizamos el spinner sobre un fondo no plano:

Spinner con írculo incompleto

Y el CSS:

.spinner, .spinner:after{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}
.spinner {
  background-color: transparent;
  border-top: 5px solid rgb(66,139,202);
  border-right: 5px solid rgb(66,139,202);
  border-bottom: 5px solid rgb(66,139,202);
  border-left: 5px solid rgba(66,139,202,.2);
}
2

Hacerlo girar

Aplicando la propiedad animation, podemos hacer girar al círculo. Nos bastará definir una transformación de rotación de 360º en una regla @keyframes y hacerla que se repita indefinidamente.

El CSS anterior quedaría:

.spinner,.spinner:after{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
 }
.spinner {
    background-color: transparent;
    border-top: 5px solid rgb(66,139,202);
    border-right: 5px solid rgb(66,139,202);
    border-bottom: 5px solid rgb(66,139,202);
    border-left: 5px solid rgba(66,139,202,.2);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: .8s;
    animation-name: spinner-loading
 }
@keyframes spinner-loading{
  0% {
      transform: rotate(0deg)
  } to {
      transform: rotate(1turn)
  }
}

Y el resultado:

De una forma muy similar, y con un poco de imaginación, se pueden hacer multitud de spinners, algunos tan clásicos como los que se ven este Pen:

Y si os habéis quedado con ganas de más, pasaros por CodePen, hay spinners espectaculares. Podéis comenzar por alguna de estas colecciones: Loaders and Spinners y Loaders Loading!.

Publicidad