Loader

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

Ninguno

Componentes requeridos

spinner

Anatomía CSS

<div class="layoutLoader">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: loader — structure only, pure DS tokens */
.l-loader {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.l-loader__overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  transform: translateY(0);
}

.l-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.l-loader__spinner {
  /* El giro lo pone el componente spinner (con su reduced-motion); el layout
     solo dimensiona el slot. Ley: layouts sin motion — maquetan, no animan. */
  width: 4rem;
  height: 4rem;
}