# Skeleton

Source: https://iriscss.com/documentation/components/skeleton/

A shimmering placeholder while content loads.

A skeleton is one line tall by default. Set a width or height for other shapes, and `.rounded` for a pill or a circle. Hide it from screen readers with `aria-hidden="true"` and give the region a label that says it is loading.

```html
<article class="card" aria-label="Loading profile">
  <div class="skeleton rounded" style="width: 3rem; height: 3rem" aria-hidden="true"></div>
  <div class="skeleton" style="width: 60%" aria-hidden="true"></div>
  <div class="skeleton" aria-hidden="true"></div>
  <div class="skeleton" style="height: 8rem" aria-hidden="true"></div>
</article>
```

The shimmer stops when the user prefers reduced motion.

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-skeleton-duration` | `1.5s` | One shimmer sweep |
| `--i-skeleton-color-background` | `color-mix(in oklab, var(--i-color-text) 10%, var(--i-color-background))` |  |
| `--i-skeleton-color-highlight` | `color-mix(in oklab, var(--i-color-text) 4%, var(--i-color-background))` |  |