Generador de CSS para spinner de carga

Qué obtienes

El generador escribe dos reglas: una clase .loader y un bloque @keyframes spin. La clase dibuja un círculo, le da un anillo gris claro y colorea el borde superior de ese anillo. Los keyframes hacen girar el círculo una vuelta completa, y la línea animation lo repite sin fin. No hace falta nada más: ni archivo de imagen, ni fuente de iconos ni script.

Con los valores predeterminados (60 px, anillo de 6 px, #10b981, 1 segundo), el resultado es este:

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

Añádelo a tu página

Pega el CSS en tu hoja de estilos y, después, añade un elemento vacío donde debe aparecer el cargador:

<div class="loader" role="status" aria-label="Cargando"></div>

Muestra el elemento mientras el trabajo está en curso y elimínalo, u ocúltalo con display: none, cuando llegue el contenido. Los atributos role y aria-label permiten que los lectores de pantalla anuncien el estado.

Tamaños que funcionan

Una regla práctica es un grosor de alrededor de una décima parte del diámetro. Mucho más fino se ve débil en pantallas de alta resolución, y mucho más grueso convierte el anillo en una mancha.

Puntos a tener en cuenta

• El color de la pista está fijado en gris claro (#eee). En un fondo oscuro, cambia ese valor en el CSS pegado.
• La herramienta crea un único spinner circular. Los puntos, las barras y otras formas necesitan un marcado diferente.
• Si en tu proyecto ya existe una clase llamada loader o una animación llamada spin, renómbralas en el CSS pegado para que las reglas no entren en conflicto.

Mostrar y ocultar el spinner

Un spinner de carga debe aparecer cuando empieza el trabajo y desaparecer cuando termina. Un patrón sencillo es mantener un atributo hidden en el elemento y quitarlo cuando empieza una petición. Si la espera suele ser muy breve, añade un pequeño retraso de unos cientos de milisegundos antes de mostrar el anillo, para que las respuestas rápidas no hagan parpadear un spinner durante un instante. Elijas lo que elijas, oculta siempre el spinner también en caso de error, o los visitantes esperarán algo que ya ha fallado.