SWCore / CSS / Skeleton

Skeleton CSS

Placeholder animado (efeito "shimmer") enquanto o conteúdo real carrega — texto, avatar, imagem, botão e badge, prontos pra compor.

O que é

Cada <div sw-skl="..."> é UMA forma (placeholder brilhante que pulsa). Junte várias pra montar a composição da tela inteira carregando.

Como funciona

100% CSS — a animação é um background em gradiente que desliza via @keyframes, e some sozinha sob prefers-reduced-motion. Sem JS: você troca o skeleton pelo conteúdo real removendo o elemento quando os dados chegarem.

Exemplos

Texto e título Ao vivo

<div sw-skl="ttl"></div>
<div sw-skl="txt"></div>
<div sw-skl="txt"></div> <!-- a última linha de uma sequência encolhe sozinha -->

Formas avulsas — avatar, círculo, quadrado, badge Ao vivo

<div sw-skl="avt"></div>      <!-- avatar redondo -->
<div sw-skl="g avt"></div>    <!-- avatar redondo, grande -->
<div sw-skl="badge"></div>

Composição — card inteiro carregando Ao vivo

<div sw-card>
  <div class="flx alc gap-4">
    <div sw-skl="avt"></div>
    <div class="f-1 flx f-cl gap-2">
      <div sw-skl="txt sm" style="width:50%"></div>
      <div sw-skl="txt sm" style="width:30%"></div>
    </div>
  </div>
  <div sw-skl="img" style="margin-top:1rem"></div>
  <div sw-skl="ttl" style="margin-top:1rem"></div>
  <div sw-skl="txt"></div>
  <div sw-skl="txt" style="width:70%"></div>
</div>

Atributos

Nenhum.

Variantes

txt (+ sm) · ttl (+ sm)

linha de texto / título — a última "txt" de uma sequência encolhe pra 70% sozinha

avt (+ pp p g)

círculo de avatar, 3 tamanhos

crc · sqr

círculo / quadrado — livre (defina width/height)

img (+ sqr = 1:1, + wd = 21:9)

retângulo de imagem — 16:9 por padrão

btn (+ pp g)

botão

badge

selo pequeno

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorTimeline Próximo →Stepper