36/Interacción y estado

Skeleton y spinner

Placeholders de carga y un spinner que toma el color del texto o del acento.

Skeleton

HTML

<div class="cb-card cb-card--compact max-w-[360px]" role="status" aria-busy="true" aria-label="Cargando">
  <div class="flex items-center gap-3"><span class="cb-skeleton cb-skeleton--circle"></span><span class="cb-skeleton cb-skeleton--title"></span></div>
  <span class="cb-skeleton cb-skeleton--block"></span>
  <div class="cb-skeleton-stack"><span class="cb-skeleton cb-skeleton--text"></span><span class="cb-skeleton cb-skeleton--text"></span><span class="cb-skeleton cb-skeleton--text"></span></div>
</div>

Spinner

Cargando resultados

HTML

<span class="cb-spinner cb-spinner--sm" role="status" aria-label="Cargando"></span>
<span class="cb-spinner" role="status" aria-label="Cargando"></span>
<span class="cb-spinner cb-spinner--lg" role="status" aria-label="Cargando"></span>
<span class="cb-loading" role="status"><span class="cb-spinner" aria-hidden="true"></span>Cargando resultados</span>

Clases y modificadores

Clase	Descripción
`.cb-skeleton`	Bloque que parpadea suavemente.
`.cb-skeleton--text\|title\|circle\|block`	Formas comunes.
`.cb-skeleton-stack`	Líneas de texto apiladas; la última es más corta.
`.cb-spinner`	Spinner circular. `--sm` y `--lg` para tamaños.
`.cb-loading`	Spinner con texto.

Accesibilidad

Marca el contenedor que carga con aria-busy="true".
Un spinner solo necesita role="status" y aria-label.
Las animaciones se detienen con prefers-reduced-motion.