# Skeleton

A placeholder shape shown while content loads, or wrapped around the content so it never moves.

```ehtml Example
import { Skeleton } from "@elements/ui/skeleton";

<Skeleton width="12rem" />
<Skeleton shape="circle" width="var(--space-10)" />
<Skeleton shape="text" lines={3} />
<Skeleton loading={state.loading}>
  <h3>{user.name}</h3>
</Skeleton>
```

## Parts

| Part | What it is |
|---|---|
| `.skeleton` | The shape or the wrapper. Usable without the template: `<div class="skeleton" data-loading>``</div>`. |
| `.skeleton-line` | One bar of a text skeleton. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `shape` | `"block" \| "text" \| "circle"` | `"block"` | block is a rounded rect, circle is round, text is a stack of bars. |
| `loading` | `boolean` | `true` | Shows the pulse; false reveals the wrapped content in the same box. |
| `width` | `Responsive` | `""` | Any CSS length, or one per breakpoint: { initial, sm, md, lg, xl, 2xl }. |
| `height` | `Responsive` | `""` | Any CSS length, or one per breakpoint. An unsized empty block is one line high. |
| `minWidth, maxWidth` | `Responsive` | `""` | Bounds for a fluid width. |
| `minHeight, maxHeight` | `Responsive` | `""` | Bounds for the height. |
| `m, mx, my, mt, mr, mb, ml` | `Responsive` | `""` | Margins: a space step 0 to 9 (or -1 to -9) or a CSS length, or one per breakpoint. A side beats its axis, which beats m. |
| `lines` | `number` | `3` | Bars in a text skeleton; the last one is shorter. |
| `inline` | `boolean` | `false` | inline-block, for a placeholder inside a line of text. |
| `class` | `string` | `""` | Extra classes; size and shape it from your CSS. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Any other attributes: id, data-\*. |

## Slots

| Slot | Content |
|---|---|
| `default` | The real content. Laid out but hidden while loading, so the skeleton is its exact size. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-shape` | `"block" \| "text" \| "circle"` | root |
| `data-loading` | present while loading | root |
| `data-responsive` | the per breakpoint values set, e.g. "width-initial width-md" | root |

## Accessibility

- aria-busy="true" while loading, and aria-hidden and inert, so nothing inside is read or focused; text bars are aria-hidden.
- Wrapped content is visibility: hidden and bare text transparent while loading, so neither is read nor focusable until it arrives.
- Set aria-busy on the region around a group of bare shapes.
- The pulse stops under prefers-reduced-motion.

## See also

- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.