Generador de CSS de spinner para botones

Un ejemplo práctico

Imagina un botón «Guardar» azul marino con texto blanco. En el generador, introduce tamaño 16, grosor 2, color #ffffff y velocidad 0.8. La herramienta produce:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

La pista del anillo es un gris claro fijo, que se ve bien sobre un botón oscuro. Si quieres una pista más discreta, cambia #eee por un valor translúcido como rgba(255, 255, 255, 0.3) en el CSS pegado. El color del arco sigue siendo el que elegiste.

Colócalo dentro del botón

Pon el elemento del spinner antes de la etiqueta y haz que el botón sea una fila flex para que ambos queden en una línea con un espacio entre ellos:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Guardando"></span>
  Guardando
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Añade el spinner y el estado disabled solo mientras la petición está en curso. Quítalos ambos cuando termine. Desactivar el botón es lo que evita los envíos duplicados; el spinner es la señal que explica por qué.

Tamaño y grosor para botones

Notas

• El generador crea un único anillo circular. No crea el botón, así que los estilos del botón siguen siendo tuyos.
• Un anillo más grueso que una cuarta parte de su diámetro se llena y parece un disco, así que mantén los valores finos en tamaños pequeños.
• Deja la etiqueta junto al spinner. Un spinner sin texto puede ser difícil de interpretar para algunos usuarios.

Evita saltos de diseño

Si el spinner aparece y el botón se hace de repente más ancho, el diseño se desplaza y el área de clic se mueve. Hay dos soluciones sencillas. Dale al botón un ancho mínimo que ya quepa el spinner y la etiqueta más larga. O reserva el espacio del spinner desde el principio mostrando un marcador vacío de 16 px antes de la etiqueta. Como el anillo generado tiene un ancho y una altura fijos en píxeles, es fácil reservar exactamente el espacio que necesita.