Skeleton

Placeholders de carregamento animados para conteúdo.

Importação

import { Skeleton } from 'asterui'

Exemplos

Básico

Formas de skeleton simples com diferentes dimensões.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
      </Space>
    )
}

export default App

Círculo

Skeleton circular para avatares.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12" />
        <Skeleton circle className="h-16 w-16" />
        <Skeleton circle className="h-20 w-20" />
      </div>
    )
}

export default App

Variante Texto

Skeleton que anima a cor do texto em vez do fundo.

</>

Loading heading...

Loading paragraph text that will be replaced with actual content...

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Skeleton variant="text" className="text-2xl">
          Loading heading...
        </Skeleton>
        <Skeleton variant="text">
          Loading paragraph text that will be replaced with actual content...
        </Skeleton>
      </Space>
    )
}

export default App

Props de Largura e Altura

Use props width e height para dimensionamento preciso.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton width={100} height={100} />
        <Skeleton width="200px" height="100px" />
        <Skeleton width="50%" height={100} />
      </div>
    )
}

export default App

Avatar com Texto

Padrão comum para perfis de usuário.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12 shrink-0" />
        <Space size="xs" className="flex-1">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-full" />
        </Space>
      </div>
    )
}

export default App

Skeleton de Card

Placeholder de carregamento para conteúdo de card.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="card bg-base-100 border border-base-300">
        <div className="card-body">
          <Skeleton className="h-48 w-full mb-4" />
          <Skeleton className="h-6 w-3/4 mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      </div>
    )
}

export default App

Skeleton de Lista

Placeholder de carregamento para itens de lista.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex gap-4">
            <Skeleton circle className="h-12 w-12 shrink-0" />
            <Space size="xs" className="flex-1">
              <Skeleton className="h-4 w-1/4" />
              <Skeleton className="h-4 w-full" />
            </Space>
          </div>
        ))}
      </Space>
    )
}

export default App

Layout Complexo

Skeleton para layouts de conteúdo mais complexos.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="space-y-6">
        <div className="flex gap-4">
          <Skeleton circle className="h-16 w-16 shrink-0" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-6 w-1/3" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-5/6" />
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
        </div>
      </div>
    )
}

export default App

API

Skeleton

Propriedade	Descrição	Tipo	Padrão
width	Largura em pixels ou string CSS	string | number	-
height	Altura em pixels ou string CSS	string | number	-
circle	Tornar skeleton circular	boolean	false
variant	Variante do skeleton	'default' | 'text'	'default'
className	Classes CSS adicionais	string	-
children	Conteúdo (para variante texto)	React.ReactNode	-

Acessibilidade

• Skeleton é oculto de leitores de tela por padrão
• Use com estados de carregamento para informar aos usuários que o conteúdo está carregando
• Combine formas de skeleton com o layout de conteúdo real
• Combine com regiões ARIA live para anúncios de carregamento