componentes / skeleton

Skeleton

Marcador de carga con la forma del contenido: líneas de texto, título, avatar, rectángulo o tarjeta.

Cómo usar

Decorativo (`aria-hidden`), así que usa `aria-busy` en el contenedor mientras carga. El pulso se detiene con `prefers-reduced-motion`. Cambia el tamaño con `width`/`height` o `className`; `lines` dibuja varias líneas de texto, la última más corta.

preview

Skeleton.tsx

import { Skeleton } from "vaiperui";
 
<div aria-busy={loading}>
  <Skeleton variant="avatar" />
  <Skeleton variant="title" width="60%" />
  <Skeleton lines={3} />
</div>

Variantes

preview

text

title

avatar

rectangle

card

variantes.tsx

<Skeleton variant="text" />
<Skeleton variant="title" />
<Skeleton variant="avatar" />
<Skeleton variant="rectangle" />
<Skeleton variant="card" />

Líneas y estático

preview

lines={3}

animation="none"

lineas.tsx

<Skeleton lines={3} />
<Skeleton animation="none" variant="card" />

Props

Prop	Valores	Predeterminado	Descripción
variant	text \| title \| avatar \| rectangle \| card	text	Forma y tamaño por defecto
lines	number	1	solo text: número de líneas; la última de varias es más corta
width / height	number \| string	por variante	Tamaño CSS (un número es px)
radius	none \| sm \| md \| lg \| full	por variante	Reemplaza el redondeo
animation	pulse \| none	pulse	El pulso se apaga con prefers-reduced-motion
(nativas)	HTMLAttributes<HTMLDivElement>	ninguno	role (reemplaza el predeterminado), className, style, aria-*, ref, etc.

Accesibilidad

Cada elemento es `aria-hidden="true"`, así que los lectores de pantalla ignoran el marcador por completo.
No tiene role ni texto; no transmite nada por sí solo.
La animación de pulso usa `motion-reduce:animate-none`, así que se detiene con `prefers-reduced-motion`.
Pasa `animation="none"` para renderizar un marcador estático.

Ten en cuenta

Skeleton no define `aria-busy` ni anuncia nada: pon `aria-busy` tú mismo en el contenedor que carga.
Si el usuario necesita saber que la carga empezó o terminó, anúncialo en tu propia región live (por ejemplo un texto `role="status"` visualmente oculto).