---
outline: deep
---

# Skeleton

Skeletons are used as animated placeholders that mimic the shape of content while it loads. Commonly used to reduce perceived loading time in lists, cards, and dashboards.

**`<l-skeleton>`** — Custom Element (no Shadow DOM)

## Options

### Shapes

Set `shape` to `circle`, `rect`, or `text` (default).

```html
<l-skeleton
  shape="text"
  class="w-48"
></l-skeleton>
<l-skeleton
  shape="rect"
  class="h-20 w-48"
></l-skeleton>
<l-skeleton
  shape="circle"
  class="size-12"
></l-skeleton>
```

### Animations

Set `animation` to `pulse` (default) or `wave`.

```html
<div class="flex flex-col gap-2">
  <l-skeleton
    animation="pulse"
    class="h-4 w-48"
  ></l-skeleton>
  <l-skeleton
    animation="wave"
    class="h-4 w-48"
  ></l-skeleton>
</div>
```

## Examples

### Card placeholder

```html
<div class="flex gap-3 w-64">
  <l-skeleton
    shape="circle"
    class="size-10 shrink-0"
  ></l-skeleton>
  <div class="flex flex-col gap-2 flex-1">
    <l-skeleton
      shape="text"
      class="w-3/4"
    ></l-skeleton>
    <l-skeleton
      shape="text"
      class="w-full"
    ></l-skeleton>
    <l-skeleton
      shape="text"
      class="w-1/2"
    ></l-skeleton>
    <l-skeleton
      shape="rect"
      class="h-24 w-full mt-2"
    ></l-skeleton>
  </div>
</div>
```

## Accessibility

### Criteria

- **Motion** — Animation respects `prefers-reduced-motion`
- **Loading state** — Wrap skeleton groups in a container with `aria-busy="true"` and `aria-label` while loading

### Rules

- Wrap skeleton placeholders in a container with `aria-busy="true"` while content is loading, and remove it when done
- Add `aria-label="Loading"` to the skeleton container for screen reader context

## API reference

### Importing

```js
import 'luxen-ui/skeleton';
```

```css
@import 'luxen-ui/css/skeleton';
```

### Attributes & Properties

- **shape**: `circle | text` — Placeholder shape. Default is a block.
- **animation**: `pulse | wave` — Loading animation. Default is `pulse`.

### CSS custom properties

- `--width` — Width of the skeleton
- `--height` — Height of the skeleton