CSS Element

Skeleton [y2skeleton]

Placeholder de carregamento com animação shimmer - simula o layout enquanto o conteúdo não chega.

1. Elementos Básicos

2. Formas

Retângulo

Circular

Quadrado

Pill

3. Skeleton de Card

Imagem
A

Ana Silva

Designer

Texto do conteúdo real aqui aparecerá após o carregamento ser concluído.

4. Skeleton de Tabela

5. Controlar Animação

// Remover skeleton após carregar conteúdo
async function carregarDados() {
  const skeletons = document.querySelectorAll('[y2skeleton]');
  const dados = await fetch('/api/dados').then(r => r.json());

  // Substituir skeletons pelo conteúdo real
  renderConteudo(dados);
  skeletons.forEach(s => s.remove());
}

6. Loader (Overlay)

Área de conteúdo sendo carregado...

7. Spinners e Dots (Indicadores Independentes)

Spinner Padrão

Dots Pulsantes

Inline Carregamento

Carregando dados...

Quick Reference

Atributo/Classe Componente Descrição
[y2skeleton] Skeleton Atributo base com animação shimmer. Defina width e height via style.
.is-cir Skeleton Forma circular (border-radius: 50%).
.is-pil Skeleton Forma pill (border-radius total).
.is-txt Skeleton Preset altura de texto padrão (1.4em).
.is-h1 / .is-h2 Skeleton Presets de altura para títulos H1/H2.
.is-btn Skeleton Preset tamanho de botão padrão (3.6rem x 12rem).
.is-img Skeleton Preset imagem - 100% de largura com aspect-ratio 16/9.
.is-no-ani Skeleton Remove a animação shimmer.
.y2skeleton-blk Skeleton Container flex-column com gap para agrupar skeletons.
[y2loader] Loader Overlay de carregamento embassado. Exige container pai com position: relative.
.is-vis Loader Exibe o overlay bloqueando interação.
.is-fix Loader Overlay em position: fixed - cobre toda a viewport.
.y2loader-spin Loader Spinner circular animado (uso independente ou dentro de [y2loader]).
.y2loader-dot Loader Dots pulsantes - requer 3 <span> filhos.
.y2loader-inline Loader Spinner inline com texto - ideal dentro de botes ou parágrafos.