Generador de spinner CSS simple

Por qué este spinner es sencillo

Muchos cargadores usan varios elementos anidados, imágenes de fondo o scripts. Este es un único div con estilo de círculo. El anillo está formado por un borde, y solo la parte superior del borde tiene otro color. Al girar el círculo, esa parte coloreada recorre el contorno. Toda la técnica se basa en cuatro ideas:

1. Una caja cuadrada con el mismo ancho y alto.
2. border-radius: 50% para convertir la caja en un círculo.
3. Un borde gris con un solo lado coloreado, mediante border-top-color.
4. Una animación de rotación que nunca se detiene.

El código completo

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="loader"></div>

Eso es todo el cargador. No hay nada que descargar ni ninguna dependencia que mantener actualizada.

Centrarlo

El anillo es un elemento de bloque normal. Para centrarlo en la página o dentro de un contenedor, añade margin: 0 auto; a .loader para centrado horizontal, o convierte el padre en un contenedor flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Lo que esta herramienta no hace

• Solo genera el estilo del anillo. Las filas de puntos, las barras y los cargadores de pulsación son diseños distintos.
• El color de la pista es un gris claro fijo; edítalo en el CSS pegado si tu fondo es oscuro.
• No añade atributos de accesibilidad a tu marcado. Añade tú mismo role="status" y un aria-label al elemento.

Pequeños ajustes después de copiar

Como el spinner solo tiene unas pocas propiedades, es fácil editarlo. Para que el anillo se vea más ligero, reduce el ancho del borde. Para que transmita más calma, aumenta el tiempo de la animación. Para usar el mismo cargador en dos tamaños, copia la clase una vez y sobrescribe solo width, height y border-width en una segunda clase. Mantener el código tan corto es la gran ventaja de un spinner simple: puedes leerlo entero de un vistazo y cambiar cualquier valor sin buscar en una biblioteca.

También puedes teñir la pista cambiando #eee por un color que encaje con tu página, mientras el arco en movimiento conserva el color que elegiste en el generador.