Skeleton

Gráfico de espaço reservado que ocupa o lugar do conteúdo enquanto ele carrega, com uma animação de brilho.

Use quando precisar de uma barra reservada com brilho para segurar o espaço do conteúdo durante o carregamento. Dimensione o pai do <r-skeleton> para casar com o conteúdo real e troque-o quando os dados chegarem.

Início rápido

Uso básico

O esqueleto se estica para ocupar a largura do elemento pai e tem 16px de altura por padrão.

<r-skeleton></r-skeleton>

A largura segue o pai

Como o esqueleto é width: 100%, controle o comprimento dele dimensionando o contêiner em que ele vive.

<div style="width: 100px">
  <r-skeleton></r-skeleton>
</div>
<div style="width: 200px">
  <r-skeleton></r-skeleton>
</div>
<div style="width: 100%">
  <r-skeleton></r-skeleton>
</div>

Empilhar espaços reservados

Combine vários esqueletos para imitar um bloco de texto ou um parágrafo.

<div style="display: flex; flex-direction: column; gap: 12px">
  <r-skeleton></r-skeleton>
  <r-skeleton></r-skeleton>
  <r-skeleton></r-skeleton>
</div>

Referência da API

Propriedades

Propriedade	Tipo	Padrão	Descrição
sheet	string	''	CSS injetado no shadow DOM do componente para sobrescrever estilos

Estilo próprio sheet

Passe uma string de CSS por sheet para sobrescrever a aparência do esqueleto dentro do shadow DOM dele.

<r-skeleton sheet=".ran-skeleton { height: 40px; border-radius: 20px; }"></r-skeleton>

Variáveis CSS

O esqueleto também expõe propriedades personalizadas de CSS para temas sem sheet:

Variável	Padrão	Descrição
--ran-skeleton-height	16px	Altura da barra
--ran-skeleton-background	var(--ran-gray-alpha-200, …)	Cor de fundo base (sem brilho)
--ran-skeleton-border-radius	var(--ran-radius-sm, 6px)	Raio dos cantos
--ran-skeleton-shimmer-background	linear-gradient(90deg, …)	Gradiente do reflexo em movimento
--ran-skeleton-shimmer-animation-duration	1.4s	Duração de uma passada do brilho

<r-skeleton style="--ran-skeleton-height: 32px; --ran-skeleton-border-radius: 16px"></r-skeleton>

Eventos

Nenhum. O esqueleto não despacha eventos personalizados.

Slots

Nenhum. O esqueleto desenha apenas a própria barra e não projeta conteúdo de slots.

Boas práticas

• Case com o layout: dimensione o contêiner pai para que cada esqueleto tenha a largura do conteúdo real que ele representa.
• Imite a forma: empilhe vários esqueletos com espaçamentos consistentes para representar texto de várias linhas ou linhas de uma lista.
• Use variáveis para temas: prefira as variáveis CSS --ran-skeleton-* para ajustes simples; use sheet apenas quando precisar de seletores que as variáveis não cobrem.
• Troque ao carregar: substitua os esqueletos pelo conteúdo real assim que os dados chegarem, em vez de deixá-los animando indefinidamente.