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
Use skeletons quandoUse skeletons when
O conteúdo esta carregando é a estrutura do layout e conhecida antecipadamente: páginas, cards, listas, tabelas e seções de perfil. Skeletons preveem a forma do conteúdo que esta chegando para que a interface pareca mais rapida.Content is loading and the layout structure is known ahead of time: pages, cards, lists, tables, and profile sections. Skeletons preview the shape of incoming content so the interface feels faster.
Não use skeletons quandoDon't use skeletons when
Uma única ação esta carregando (use um Spinner no button) ou quando a estrutura do conteúdo e desconhecida e imprevisível (use um Spinner).A single action is loading (use a Spinner in the button instead) or when the content structure is unknown and unpredictable (use a Spinner).
AnatomiaAnatomy
1 Shape (
2 Variante de forma — text, circle ou rectangle.
3 Container de loading — aplica
2 Shape variant — text, circle, or rectangle.
3 Loading container — apply
.ds-skeleton) — bloco visual sem conteúdo semântico próprio.2 Variante de forma — text, circle ou rectangle.
3 Container de loading — aplica
aria-busy="true" no conteúdo que está sendo carregado; shapes individuais podem usar aria-hidden="true".
1 Shape (.ds-skeleton) — visual block with no semantic content of its own.2 Shape variant — text, circle, or rectangle.
3 Loading container — apply
aria-busy="true" to the content being loaded; individual shapes can use aria-hidden="true".
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
Faça
Combine as formas do skeleton com o conteúdo real: circulos para avatars, linhas de texto para paragrafos, retangulos para imagens.Match skeleton shapes to actual content: circles for avatars, text lines for paragraphs, rectangles for images.
Não faça
Não use um único retangulo genérico para todos os estados de carregamento — isso não preve o layout real.Don't use a single generic rectangle for all loading states -- it doesn't preview the real layout.
Mapeamento de tokensToken mapping
| PropriedadeProperty | Token | Variável CSSCSS variable |
|---|---|---|
| fundobackground | semantic.background.subtle | --ds-background-subtle |
| 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) |
| altura (texto)height (text) | component.skeleton.text.height.default | --ds-skeleton-text-height-default |
| radius (texto)radius (text) | component.skeleton.text.radius.default | --ds-skeleton-text-radius-default |
| tamanho (circulo)size (circle) | component.skeleton.circle.size.default | --ds-skeleton-circle-size-default |
| radius (circulo)radius (circle) | component.skeleton.circle.radius.default | --ds-skeleton-circle-radius-default |
| altura (retangulo)height (rectangle) | component.skeleton.rectangle.height.default | --ds-skeleton-rectangle-height-default |
| radius (retangulo)radius (rectangle) | component.skeleton.rectangle.radius.default | --ds-skeleton-rectangle-radius-default |
Classes CSSCSS classes
| ClasseClass | DescriçãoDescription |
|---|---|
ds-skeleton | Classe base do skeleton com animação de pulsoBase skeleton class with pulse animation |
ds-skeleton--text | Placeholder de linha de texto com altura default 12px e radius mdText line placeholder with 12px default height and md radius |
ds-skeleton--circle | Placeholder circular com tamanho default 40pxCircular placeholder with 40px default size |
ds-skeleton--rectangle | Placeholder de bloco retangular com altura default 120px e radius mdRectangular block placeholder with 120px default height and md radius |
AccessibilityAccessibility
| Critério 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 | ✓ |
Resumo dos atributos ARIAARIA attributes summary
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.