DEV Community

loading...
Cover image for Spinner facil y rapido

Spinner facil y rapido

dmx profile image Dorian Morones ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
  }
}

Enter fullscreen mode Exit fullscreen mode

Resultado:

Alt Text
Codepen

Discussion (0)

pic
Editor guide