Skeleton

Marcadores de posición de carga animados para contenido.

Importar

import { Skeleton } from 'asterui'

Ejemplos

Básico

Formas de skeleton simples con diferentes dimensiones.

</>

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 de texto

Skeleton que anima el color del texto en lugar del fondo.

</>

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 ancho y alto

Usa props de ancho y alto para dimensionamiento 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 con texto

Patrón común para perfiles de usuario.

</>

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 tarjeta

Marcador de posición de carga para contenido de tarjeta.

</>

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

Marcador de posición de carga para elementos 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

Diseño complejo

Skeleton para diseños de contenido más complejos.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
width	Ancho en píxeles o string CSS	string | number	-
height	Alto en píxeles o string CSS	string | number	-
circle	Hacer skeleton circular	boolean	false
variant	Variante de skeleton	'default' | 'text'	'default'
className	Clases CSS adicionales	string	-
children	Contenido (para variante de texto)	React.ReactNode	-

Accesibilidad

• El skeleton está oculto de lectores de pantalla por defecto
• Usa con estados de carga para informar a los usuarios que el contenido está cargando
• Coincide las formas del skeleton con el diseño de contenido real
• Combina con regiones ARIA live para anuncios de carga