Esqueleto (skeleton)
Formas de marcador de posición mientras carga el contenido. Los esqueletos son decorativos: ocúltalos a la tecnología asistiva con aria-hidden="true" y marca el contenedor que espera con aria-busy="true". Sustitúyelos por el contenido real; no los dejes en el DOM.
<div class="iv-grid iv-u-gap-4 iv-u-grid-cols-1 iv-u-md-grid-cols-2" aria-busy="true">
<span class="iv-u-sr-only">Loading the release summary</span>
<article class="iv-card">
<div class="iv-skeleton iv-skeleton--rect" aria-hidden="true"></div>
<div class="iv-card__body iv-stack iv-u-gap-3">
<div class="iv-skeleton iv-skeleton--title" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 80%"></div>
</div>
</article>
<article class="iv-card">
<div class="iv-card__body iv-stack iv-u-gap-3">
<div class="iv-cluster iv-u-gap-3 iv-u-items-center">
<div class="iv-skeleton iv-skeleton--circle" aria-hidden="true"></div>
<div class="iv-stack iv-u-gap-2" style="flex: 1">
<div class="iv-skeleton iv-skeleton--title" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 45%"></div>
</div>
</div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true"></div>
<div class="iv-skeleton iv-skeleton--text" aria-hidden="true" style="inline-size: 60%"></div>
</div>
</article>
</div>Modificadores
--text, --title, --circle, --rect. El brillo usa @keyframes iv-shimmer y queda estático bajo prefers-reduced-motion.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-skeleton--text | Línea de texto: alto de una línea con el radio del texto. |
iv-skeleton--title | Línea más alta y más corta, para un título. |
iv-skeleton--rect | Bloque rectangular: una imagen, una tarjeta. |
iv-skeleton--circle | Círculo, para un avatar. |