Skeleton
A placeholder in the shape of content that's loading.
import { Skeleton } from "@flinbu/seed";Avatar and text
import { Skeleton } from "@flinbu/seed";
<div className="flex w-full max-w-sm items-center gap-sm" aria-busy="true">
<Skeleton shape="circle" width={40} height={40} />
<div className="flex flex-1 flex-col gap-xs">
<Skeleton shape="text" width="60%" />
<Skeleton shape="text" width="90%" />
</div>
</div>Use it for
- Loading layouts you can predict.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width / height | number | string | none | Size. |
shape | 'block' | 'text' | 'circle' | 'block' | text is a 12px line. |
Accessibility
- Hidden from screen readers; set aria-busy on the loading region.