Skeleton [sw-skl]
Placeholders de carregamento com efeito shimmer — usados internamente pelos cards de produto (.sw-card-ldg).
1. Formas Básicas
2. Avatar — tamanhos
Mesma escala do componente [sw-avt] real: pp, p, padrão e g.
3. Imagem, Botão e Badge
.sw-skl-img (16:9) · .sw-skl-img-sqr (1:1) · .sw-skl-img-wd (21:9)
Botão — pp / padrão / g
Badge/chip e círculo/quadrado avulsos
4. Card de Perfil (composto)
5. Linha de Tabela (composto)
Mesmo padrão usado no carregamento de [sw-table] (tr.is-ldg) — aqui montado manualmente com formas soltas.
Referência
| Classe | Tipo | Descrição |
|---|---|---|
[sw-skl] | Base | Aplica o gradiente com shimmer animado. |
.sw-skl-txt | Forma | Linha de texto — a última de um grupo encolhe pra 70%. |
.sw-skl-txt-sm | Forma | Linha de texto menor — legenda/meta. |
.sw-skl-ttl | Forma | Linha de título, mais alta. |
.sw-skl-ttl-sm | Forma | Linha de título menor (subtítulo). |
.sw-skl-avt -pp -p -g | Tamanho | Círculo de avatar — mesma escala do [sw-avt] real. |
.sw-skl-img -sqr -wd | Forma | Retângulo de imagem — 16:9, 1:1 (quadrado) ou 21:9 (banner). |
.sw-skl-btn -pp -g | Tamanho | Retângulo de botão — mesma escala do [sw-btn] real. |
.sw-skl-badge | Forma | Pílula curta — placeholder de badge/chip. |
.sw-skl-crc / .sw-skl-sqr | Forma | Círculo ou quadrado avulso, tamanho livre via style. |