Skeleton
Formas placeholder com animação de pulso, usadas para indicar conteúdo em carregamento. Skeletons fornecem uma prévia de baixa fidelidade do layout antes dos dados chegarem.Placeholder shapes with a pulse animation, used to indicate loading content. Skeletons provide a low-fidelity preview of the layout before data arrives.
Quando usarWhen to use
Skeleton de textoText skeleton
Representa linhas de conteúdo de texto. Use larguras variadas para simular formas naturais de paragrafo.Represents lines of text content. Use varying widths to simulate natural paragraph shapes.
Skeleton circularCircle skeleton
Perfeito para placeholders de avatar ou ícone.Perfect for avatar or icon placeholders.
Skeleton retangularRectangle skeleton
Bloco de largura total para imagens, banners ou grandes áreas de conteúdo.Full-width block for images, banners, or large content areas.
Composição: card de perfilComposition: profile card
Combinando diferentes formas de skeleton para criar um placeholder de carregamento realista para um card de perfil.Combining different skeleton shapes to create a realistic loading placeholder for a profile card.
Composição: lista de cardsComposition: card list
Um estado de carregamento para uma lista de cards de conteúdo com imagem, título e descricao.A loading state for a list of content cards with image, title, and description.
Boas práticasBest practices
Mapeamento de tokensToken mapping
| PropriedadeProperty | Token (semantic) | Variavel CSSCSS variable |
|---|---|---|
| fundobackground | semantic.background.disabled | --ds-background-disabled |
| animação (pulso de opacidade)animation (opacity pulse) | valores literais (sem token)literal values (no token) | opacity: 1 → 0.4 → 1 (keyframe @ds-pulse)opacity: 1 → 0.4 → 1 (keyframe @ds-pulse) |
| radius (texto)radius (text) | foundation.radius.4 | --ds-radius-4 |
| radius (circulo)radius (circle) | foundation.radius.9999 | --ds-radius-9999 |
Classes CSSCSS classes
| ClasseClass | DescricaoDescription |
|---|---|
ds-skeleton | Classe base do skeleton com animação de pulsoBase skeleton class with pulse animation |
ds-skeleton--text | Placeholder de linha de texto (border-radius pequeno)Text line placeholder (small border-radius) |
ds-skeleton--circle | Placeholder circular (border-radius 50%)Circular placeholder (50% border-radius) |
ds-skeleton--rectangle | Placeholder de bloco retangularRectangular block placeholder |
AccessibilityAccessibility
| Criterio WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 4.1.2 Name, Role, Value (A) | aria-busy="true" no container de carregamento + aria-label descrevendo o que esta carregandoaria-busy="true" on the loading container + aria-label describing what is loading | ✓ |
| 1.3.1 Info and Relationships (A) | aria-hidden="true" em elementos skeleton individuais (são decorativos)aria-hidden="true" on individual skeleton elements (they are decorative) | ✓ |
| 2.3.3 Animation from Interactions (AAA) | Respeita prefers-reduced-motion — animação de pulso pausada ou removidaRespects prefers-reduced-motion -- pulse animation paused or removed | ✓ |
aria-busy="true" — defina no container que contem os placeholders de skeleton durante o carregamento. Remova quando o conteúdo real aparecer.aria-hidden="true" — defina em formas skeleton individuais (são placeholders visuais, não conteúdo significativo).prefers-reduced-motion — o CSS do skeleton respeita esta media query pausando a animação de pulso.aria-busy="true" — set on the container that holds skeleton placeholders while loading. Remove it once real content appears.aria-hidden="true" — set on individual skeleton shapes (they are visual placeholders, not meaningful content).prefers-reduced-motion — the skeleton CSS respects this media query by pausing the pulse animation.