Cómo crear un spinner con CSS

Por Diego Chiapa

Un spinner loader, es un elemento muy típico en nuestras aplicaciones ya que le indica al usuario que un contenido se está cargando.

Vamos a ver cómo puedes crear el tuyo con HTML y CSS en muy pocas líneas de código.

Código HTML y CSS del spinner

Lo único que necesitamos para crear nuestro spinner en HTML es:

<div class="spinner"></div>

Ahora nos falta agregar los estilos, que le darán vida a nuestro spinner:

.spinner{
  border: 4px solid rgba(0,0,0, 0.1);
  border-left-color: #467acf;
  width: 36px;
  margin: 20px auto;
  animation: spin 1s linear infinite;
}

Por último nos falta la animación que convierte nuestro borde en un spinner real:

@keyframes spin {
  0% {
    rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Esto ha sido todo, ya tenemos nuestro spinner funcionando, muchas gracias por leer este post, espero que te sea de utilidad! Si es así, por favor comparte y recomienda el blog :)