Skeleton

Skeleton ocupa o espaço que o conteúdo real terá enquanto carrega. Combine forma e comprimento das linhas finais para a página não saltar; use Spinner quando não houver layout significativo a reservar.

Exemplos

Quando usar

Use Skeleton quando a página conhece a forma do conteúdo que ainda está carregando.

Prefira outro componente quando:

• A espera não tem forma final de conteúdo para preservar — use Spinner.
• A operação tem progresso mensurável — use Progress.
• Um resultado falhou ou precisa de explicação — use Alert ou um estado vazio explícito.

Acessibilidade

• Skeleton é aria-hidden="true", então nunca anuncia uma barra de carregamento sem significado a leitores de tela.
• Coloque o estado de carregamento na região ao redor quando isso importar, como aria-busy="true" no contêiner e uma mensagem de status próxima quando a espera não estiver óbvia.
• O shimmer respeita prefers-reduced-motion parando a animação. Não adicione outra animação que devolva movimento a quem optou por reduzi-lo.
• Skeleton é um <span> sem interação por teclado ou comportamento de foco.

API e código

<div aria-busy="true">
  <span
    class="lyra-skeleton lyra-skeleton--circle"
    style="width: 40px; height: 40px"
    aria-hidden="true"
  ></span>
  <span class="lyra-skeleton" style="width: 55%; height: 14px" aria-hidden="true"></span>
  <span class="lyra-skeleton" style="width: 85%; height: 12px" aria-hidden="true"></span>
</div>

<lyra:skeleton width="240px" :height="14" />