Generador de CSS para spinner de superposición

Dos partes: el spinner y la superposición

El generador produce el spinner: la clase .loader y la regla @keyframes spin. La superposición es un contenedor separado que añades tú. Cubre toda la ventana y centra su elemento hijo. Esta separación es útil porque puedes reutilizar el mismo spinner en un botón o en una tarjeta y usar el contenedor solo cuando necesites un estado que bloquee la página.

CSS del contenedor

Pega esto después de las reglas generadas:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

position: fixed con inset: 0 estira la capa hasta los cuatro bordes de la pantalla. Los ajustes de flex centran el spinner en ambas direcciones. El z-index mantiene la capa por encima del contenido normal, así que súbelo si una cabecera o un modal sigue apareciendo encima.

Cubrir solo una zona en lugar de la página

Si solo se carga una tarjeta o una tabla, dale a su contenedor position: relative y cambia el contenedor de la superposición a position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

El resto de la página sigue siendo utilizable y solo se atenúa ese panel.

Elige el color de la superposición según la página

En una página oscura, cambia también el color de la pista #eee en el CSS del cargador pegado para que el anillo no brille en exceso.

Buenas prácticas

• Elimina la superposición en cuanto termine el trabajo, o la página seguirá bloqueada.
• Úsala para esperas breves. En operaciones largas, muestra un texto que explique lo que está pasando.
• El marcado de la superposición y la gestión del foco son responsabilidad tuya. Esta herramienta solo genera el spinner.

Evita que la página se desplace

Una superposición fija oculta la página, pero el contenido que queda detrás puede seguir desplazándose con la rueda del ratón o con el tacto. Si eso importa, añade overflow: hidden; al body mientras la superposición está visible, y quítalo cuando desaparezca. Mantén la regla vinculada al mismo momento en que muestras y ocultas la superposición, para que ambas cosas nunca se desincronicen.