Loader

.loader muestra un spinner y un texto mientras algo carga. Dentro van loader__content, el spinner (loader__spinner) y el texto (loader__text). No necesita JS del kit: agrégalo a la página al empezar la carga y quítalo al terminar (o usa el atributo hidden).

Pantalla completa

Por defecto cubre la pantalla con un velo que desenfoca la página. Aparece con 150 ms de retraso, así no parpadea si la carga es instantánea.

MóvilTabletEscritorioCompleto

HTML

<div class="loader" role="status" aria-live="polite">
  <div class="loader__content">
    <span class="loader__spinner" aria-hidden="true"></span>
    <p class="loader__text">Cargando…</p>
  </div>
</div>

React

export default function LoaderPantallaCompleta() {
  return (
    <div className="loader" role="status" aria-live="polite">
      <div className="loader__content">
        <span className="loader__spinner" aria-hidden="true" />
        <p className="loader__text">Cargando…</p>
      </div>
    </div>
  );
}

En la carga inicial, cuando aún no hay página detrás, agrega loader--instant para que aparezca sin retraso.

En línea

loader--inline lo muestra dentro de un bloque, sin velo: por ejemplo, mientras carga un listado.

MóvilTabletEscritorioCompleto

HTML

<div class="loader loader--inline" role="status" aria-live="polite">
  <div class="loader__content">
    <span class="loader__spinner" aria-hidden="true"></span>
    <p class="loader__text">Cargando artículos…</p>
  </div>
</div>

React

export default function LoaderEnLinea() {
  return (
    <div className="loader loader--inline" role="status" aria-live="polite">
      <div className="loader__content">
        <span className="loader__spinner" aria-hidden="true" />
        <p className="loader__text">Cargando artículos…</p>
      </div>
    </div>
  );
}

Tamaños

loader--sm y loader--lg cambian el diámetro del spinner (28, 48 y 64 px).

MóvilTabletEscritorioCompleto

HTML

<div class="loader loader--inline loader--sm" role="status" aria-live="polite">
  <div class="loader__content">
    <span class="loader__spinner" aria-hidden="true"></span>
    <p class="loader__text">Pequeño</p>
  </div>
</div>
<div class="loader loader--inline" role="status" aria-live="polite">
  <div class="loader__content">
    <span class="loader__spinner" aria-hidden="true"></span>
    <p class="loader__text">Mediano</p>
  </div>
</div>
<div class="loader loader--inline loader--lg" role="status" aria-live="polite">
  <div class="loader__content">
    <span class="loader__spinner" aria-hidden="true"></span>
    <p class="loader__text">Grande</p>
  </div>
</div>

React

export default function LoaderTamanos() {
  return (
    <>
      <div className="loader loader--inline loader--sm" role="status" aria-live="polite">
        <div className="loader__content">
          <span className="loader__spinner" aria-hidden="true" />
          <p className="loader__text">Pequeño</p>
        </div>
      </div>
      <div className="loader loader--inline" role="status" aria-live="polite">
        <div className="loader__content">
          <span className="loader__spinner" aria-hidden="true" />
          <p className="loader__text">Mediano</p>
        </div>
      </div>
      <div className="loader loader--inline loader--lg" role="status" aria-live="polite">
        <div className="loader__content">
          <span className="loader__spinner" aria-hidden="true" />
          <p className="loader__text">Grande</p>
        </div>
      </div>
    </>
  );
}

Accesibilidad

• El contenedor lleva role="status" y aria-live="polite": los lectores de pantalla leen el texto sin mover el foco. No le pongas aria-busy, porque algunos lectores dejan de anunciarlo; aria-busy="true" va en la zona que se está actualizando.
• El spinner es decorativo (aria-hidden="true"). Incluye siempre loader__text, aunque sea corto.
• A pantalla completa tapa la página, pero no bloquea el teclado. Si la carga es larga, pon inert en el contenido mientras dura.
• Con movimiento reducido (prefers-reduced-motion), aparece sin transición y el spinner gira más lento.

Clases

Clase	Uso
loader	Base. Cubre la pantalla con un velo. Lleva role="status".
loader__content	Agrupa spinner y texto.
loader__spinner	Anillo que gira. Lleva aria-hidden="true".
loader__text	Texto bajo el spinner.
loader--inline	Dentro de un bloque, sin velo.
loader--instant	Aparece sin retraso.
loader--sm	Pequeño.
loader--lg	Grande.

Variables

Variable	Valor por defecto	Uso
--ds-loader-color	var(--ds-color-primary)	Color del arco que gira.
--ds-loader-track-color	color-mix(in srgb, var(--ds-loader-color) 15%, transparent)	Color del anillo de fondo.
--ds-loader-size	3rem	Diámetro del spinner.
--ds-loader-thickness	3px	Grosor del anillo.
--ds-loader-speed	0.85s	Duración de una vuelta.
--ds-loader-gap	var(--ds-space-4)	Separación entre spinner y texto.
--ds-loader-text-color	var(--ds-color-text)	Color del texto.
--ds-loader-font-size	var(--ds-font-size-sm)
--ds-loader-font-weight	var(--ds-font-weight-medium)
--ds-loader-padding	var(--ds-space-6)	Espacio interno.
--ds-loader-overlay-bg	color-mix(in srgb, var(--ds-color-surface) 55%, transparent)	Velo que cubre la página (pantalla completa).
--ds-loader-blur	8px	Desenfoque de la página bajo el velo.
--ds-loader-delay	150ms	Espera antes de aparecer (evita parpadeos en cargas rápidas).