Generador de Cargadores CSS

Cómo funciona el CSS generado

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

El cargador es un círculo dibujado con un borde grueso. La regla border-top-color pinta solo la parte superior del anillo con el color de acento, de modo que el anillo se lee como un arco, y la regla @keyframes spin lo rota alrededor de su centro. Rotar con transform: rotate() mantiene la animación barata, porque el navegador mueve el elemento en el compositor en lugar de redibujarlo fotograma a fotograma.

Para mostrarlo en una página, añade un elemento y carga el CSS:

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

Hazlo accesible

• Añade role="status" para que los lectores de pantalla anuncien el cargador.
• Pon aria-label con el texto de estado, por ejemplo “Cargando”.
• No ocultes contenido detrás de un cargador durante más de unos segundos sin un tiempo de espera de respaldo.
• Respeta prefers-reduced-motion. Para los usuarios que lo han desactivado, sustituye la animación giratoria por un simple desvanecimiento o un texto estático “Cargando…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Cuándo usar un cargador frente a una interfaz optimista

• Respuesta < 100 ms: no hace falta cargador; el ojo humano apenas percibe el retraso.
• 100 ms – 1 s: un cargador sutil (spinner pequeño, texto de botón “Cargando…”) evita los dobles clics.
• 1 s – 10 s: un cargador visible, idealmente con progreso si es medible.
• > 10 s: no es un problema de spinner; averigua qué es lo lento y corrígelo.

En envíos de formularios y clics de botón, un spinner dentro del botón suele ser mejor que una superposición a pantalla completa.