BuscarCtrl K

Appearance

Extensões

Guia de Uso - Skeleton Loader ​

Status: Implementado (Design System 1.1 • 05/11/2025) – inclui presets para cards, tabelas e formulários.

📋 Índice ​

  1. Introdução
  2. Estrutura Base
  3. Variantes
  4. Grupos
  5. Dark Mode
  6. Exemplos Práticos

Introdução ​

O componente Skeleton Loader é um placeholder animado usado durante o carregamento de conteúdo. É ideal para:

  • Melhorar percepção de performance
  • Reduzir ansiedade do usuário
  • Mostrar estrutura do conteúdo que virá
  • Manter layout estável durante carregamento

Quando Usar Skeleton Loader ​

✅ Use skeleton quando:

  • Você está carregando conteúdo assíncrono
  • Quer melhorar a percepção de velocidade
  • O conteúdo tem estrutura conhecida
  • Quer evitar "flash" de conteúdo vazio

❌ Evite usar skeleton quando:

  • O carregamento é instantâneo
  • Use Progress Bar para operações com progresso conhecido
  • O conteúdo é muito variável

Estrutura Base ​

HTML Básico ​

html
<div class="skeleton skeleton-text" style="width: 100%"></div>

Nota: O width deve ser definido inline para controlar a largura.

Variantes ​

1. Skeleton de Texto ​

html
<div class="skeleton skeleton-text" style="width: 100%"></div>
<div class="skeleton skeleton-text" style="width: 80%"></div>
<div class="skeleton skeleton-text" style="width: 60%"></div>

Tamanhos:

  • .skeleton-text--sm - Menor (12px)
  • .skeleton-text - Padrão (16px)
  • .skeleton-text--lg - Maior (20px)

2. Skeleton de Título ​

html
<div class="skeleton skeleton-title" style="width: 100%"></div>

Tamanhos:

  • .skeleton-title--sm - Menor (20px)
  • .skeleton-title - Padrão (24px)
  • .skeleton-title--lg - Maior (32px)

3. Skeleton de Imagem ​

html
<div class="skeleton skeleton-image" style="width: 200px; height: 200px;"></div>

Variantes:

  • .skeleton-image - Retangular
  • .skeleton-image--circle - Circular

4. Skeleton de Botão ​

html
<div class="skeleton skeleton-button"></div>

Tamanhos:

  • .skeleton-button--sm - Menor (32px)
  • .skeleton-button - Padrão (40px)
  • .skeleton-button--lg - Maior (48px)

5. Skeleton de Avatar ​

html
<div class="skeleton skeleton-avatar"></div>

Tamanhos:

  • .skeleton-avatar--sm - Menor (32px)
  • .skeleton-avatar - Padrão (40px)
  • .skeleton-avatar--lg - Maior (56px)

6. Skeleton de Card ​

html
<div class="skeleton-card">
    <div class="skeleton-card-header">
        <div class="skeleton skeleton-avatar"></div>
        <div style="flex: 1;">
            <div class="skeleton skeleton-text" style="width: 60%;"></div>
            <div class="skeleton skeleton-text skeleton-text--sm" style="width: 40%;"></div>
        </div>
    </div>
    <div class="skeleton-card-body">
        <div class="skeleton skeleton-text" style="width: 100%;"></div>
        <div class="skeleton skeleton-text" style="width: 90%;"></div>
    </div>
    <div class="skeleton-card-footer">
        <div class="skeleton skeleton-button skeleton-button--sm"></div>
    </div>
</div>

Grupos ​

Horizontal ​

html
<div class="skeleton-group skeleton-group--horizontal">
    <div class="skeleton skeleton-avatar"></div>
    <div style="flex: 1;">
        <div class="skeleton skeleton-text" style="width: 70%;"></div>
        <div class="skeleton skeleton-text skeleton-text--sm" style="width: 50%;"></div>
    </div>
</div>

Vertical ​

html
<div class="skeleton-group">
    <div class="skeleton skeleton-title" style="width: 100%;"></div>
    <div class="skeleton skeleton-text" style="width: 100%;"></div>
    <div class="skeleton skeleton-text" style="width: 90%;"></div>
</div>

Dark Mode ​

O Dark Mode é aplicado automaticamente quando a classe .dark, .dark-mode ou [data-theme="dark"] está presente no elemento raiz.

html
<html class="dark">
    <!-- Skeleton automaticamente em dark mode -->
</html>

Exemplos Práticos ​

Exemplo 1: Skeleton de Lista ​

html
<div class="skeleton-group">
    <div class="skeleton skeleton-title" style="width: 100%;"></div>
    <div class="skeleton skeleton-text" style="width: 100%;"></div>
    <div class="skeleton skeleton-text" style="width: 90%;"></div>
    <div class="skeleton skeleton-text" style="width: 80%;"></div>
</div>

Exemplo 2: Skeleton de Card de Produto ​

html
<div class="skeleton-card">
    <div class="skeleton skeleton-image" style="width: 100%; height: 200px; margin-bottom: 16px;"></div>
    <div class="skeleton skeleton-title" style="width: 80%; margin-bottom: 8px;"></div>
    <div class="skeleton skeleton-text" style="width: 100%;"></div>
    <div class="skeleton skeleton-text" style="width: 60%;"></div>
    <div class="skeleton skeleton-button" style="width: 120px; margin-top: 16px;"></div>
</div>

Exemplo 3: Skeleton de Tabela ​

html
<table class="table">
    <thead>
        <tr>
            <th><div class="skeleton skeleton-text" style="width: 80px;"></div></th>
            <th><div class="skeleton skeleton-text" style="width: 100px;"></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
            <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
        </tr>
    </tbody>
</table>

Exemplo 4: Integração com JavaScript ​

javascript
// Mostrar skeleton durante carregamento
function showSkeleton() {
    const container = document.getElementById('content');
    container.innerHTML = `
        <div class="skeleton-group">
            <div class="skeleton skeleton-title" style="width: 100%;"></div>
            <div class="skeleton skeleton-text" style="width: 100%;"></div>
            <div class="skeleton skeleton-text" style="width: 90%;"></div>
        </div>
    `;
}

// Carregar conteúdo real
async function loadContent() {
    showSkeleton();
    
    try {
        const data = await fetch('/api/content').then(r => r.json());
        renderContent(data);
    } catch (error) {
        showError();
    }
}

Boas Práticas ​

  1. Mantenha estrutura similar: Skeleton deve espelhar o conteúdo real
  2. Use larguras variadas: Simule parágrafos com diferentes larguras
  3. Não exagere: Use apenas quando necessário
  4. Remova após carregar: Sempre remova skeleton quando conteúdo carregar
  5. Considere animação: A animação shimmer já está incluída

Versão: 1.0.0
Data: 2025-01-27
Documentação: /public/css/design-system/GUIA_SKELETON.md
Exemplos: /public/css/design-system/exemplos-skeleton.html

Design System interno do GALES

IpeWeb