Haciendo un spinner con CSS

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

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:

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

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!.