Spinner facil y rapido

Un spinner es un componente muy importante para un sitio web, ya que nos ayudar a dar información al usuario sobre el estatus de nuestra página al realizar la primera carga, o después de una acción del usuario como cambiar de opción en el menú, abrir una galería de imágenes, o enviar un formulario.

Una forma muy fácil de hacer un spinner o loading es con puro css, de esta manera nos aseguramos que se visualizara y funcionara correctamente en cualquier navegador.

Primero necesitamos crear un contenedor HTML:

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

Ahora solo necesitamos aplicar los estilos sobre este contenedor, y al ser solo CSS, puedes elegir la manera que más te guste de implementar como CSS, SCSS, styled-components, o cualquier otro:

• Primero definiremos el tamano de nuestro spinner y agregaremos bordes para que sea un poco más estético:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;
}

• Una ves tenemos la estructura base de nuestro spinner agregaremos las animaciones, de esta manera haremos saber al usuario que nuestro sitio web sigue funcionando:

.spinner {
  width: 36px;
  height: 36px;
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-left-color: #7d47ff;

  animation: spin 1s ease infinite;
}

• Una ves agregada la animación spin solo nos queda agregar los pasos de esa animación con keyframes

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

  100% {
    transform: rotate(360deg);
  }
}

Resultado: