---
url: /api/css/skeleton-loader.md
---
# CSS: skeleton-loader

`.instui-skeleton-loader` — Decorative placeholder for content that has not loaded yet.

> \[!TIP]
> **JS Enhancement** — This component's CSS renders and works on its own; pair it with `@pantoken/interactions` to add the interactive behavior. See the [modifier table below](#modifiers).

## Accessibility

Mark the decorative loader aria-hidden="true". Put aria-busy on the parent content region,
with an initially empty status and alert outside that region. Use initSkeletonLoading from the
interactions package to announce the parent's loading state. Shapes must not receive focus.

## Usage

```css
@import "@pantoken/plugin-custom-components/custom-components.css";
```

## Examples

```html
<div style="display: flex; align-items: center; gap: 1rem; max-inline-size: 24rem">
  <div class="instui-skeleton-loader -type-avatar" aria-hidden="true">
    <div class="shape"></div>
  </div>
  <div style="flex: 1">
    <div class="instui-skeleton-loader -type-text -size-md" aria-hidden="true">
      <div class="skeleton-row" style="inline-size: 45%"><div class="shape"></div></div>
      <div class="skeleton-row" style="inline-size: 72%"><div class="shape"></div></div>
    </div>
  </div>
</div>
```

## Structure

```text
.instui-skeleton-loader
  .shape
  .skeleton-row (0..n)
    .shape
```

```mermaid
flowchart TD
  n0[".instui-skeleton-loader"]:::cssdoc-root
  n1(".shape"):::cssdoc-part
  n2(".skeleton-row"):::cssdoc-part
  n3(".shape"):::cssdoc-part
  n0 --> n1
  n2 --> n3
  n0 -->|0..n| n2
  classDef cssdoc-root fill:#eef2ff,stroke:#6366f1,color:#1e1b4b;
  classDef cssdoc-part fill:#f8fafc,stroke:#94a3b8,color:#0f172a;
  classDef cssdoc-slot fill:#f0fdf4,stroke:#4ade80,color:#14532d;
  classDef cssdoc-component fill:#fff7ed,stroke:#fb923c,color:#7c2d12;
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-size-lg` | Large text row. |
| `.-size-md` | Medium text row (default). |
| `.-size-sm` | Small text row. |
| `.-size-xl` | Extra-large text row. |
| `.-size-xs` | Extra-small text row. |
| `.-size-xxl` | Largest text row. |
| `.-size-xxs` | Legend-sized text row. |
| `.-type-avatar` | A round avatar placeholder, medium size only. |
| `.-type-image` | An image placeholder, medium size only. |
| `.-type-text` | A text bar (default). |

## Parts

| Part | Description |
| --- | --- |
| `.shape` | The clipped placeholder surface sized for the selected loader type. |
| `.skeleton-row` | A repeated text-row wrapper that applies vertical spacing. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::before` | — |

## Custom properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--pantoken-skeleton-sweep` | `<percentage>` | `0%` | — |

## Animations

| Animation | Description |
| --- | --- |
| `pantoken-skeleton-sweep` | — |

## Conditions

| Type | Query | Description |
| --- | --- | --- |
| media | `(prefers-reduced-motion: reduce)` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-skeleton-loader-avatar-border-radius` | `<length>` | `999rem` |
| `--instui-component-skeleton-loader-background-color` | `<color>` | `light-dark(#8D959F, #5F6E7A)` |
| `--instui-component-skeleton-loader-bezier` | — | `0.42, 0, 0.58, 1` |
| `--instui-component-skeleton-loader-duration` | `<time>` | `1500ms` |
| `--instui-component-skeleton-loader-image-border-radius` | `<length>` | `0.5rem` |
| `--instui-component-skeleton-loader-shimmer-color` | `<color>` | `light-dark(#AAB0B5, #737F8A)` |
| `--instui-component-skeleton-loader-text-border-radius` | `<length>` | `0.25rem` |
| `--instui-component-skeleton-loader-text-height-lg` | `<length>` | `1.75rem` |
| `--instui-component-skeleton-loader-text-height-md` | `<length>` | `1.5rem` |
| `--instui-component-skeleton-loader-text-height-sm` | `<length>` | `1.25rem` |
| `--instui-component-skeleton-loader-text-height-xl` | `<length>` | `2rem` |
| `--instui-component-skeleton-loader-text-height-xs` | `<length>` | `1rem` |
| `--instui-component-skeleton-loader-text-height-xxl` | `<length>` | `2.25rem` |
| `--instui-component-skeleton-loader-text-height-xxs` | `<length>` | `0.75rem` |
| `--instui-component-skeleton-loader-text-padding-lg` | `<length>` | `0.21875rem` |
| `--instui-component-skeleton-loader-text-padding-md` | `<length>` | `0.1875rem` |
| `--instui-component-skeleton-loader-text-padding-sm` | `<length>` | `0.15625rem` |
| `--instui-component-skeleton-loader-text-padding-xl` | `<length>` | `0.25rem` |
| `--instui-component-skeleton-loader-text-padding-xs` | `<length>` | `0.125rem` |
| `--instui-component-skeleton-loader-text-padding-xxl` | `<length>` | `0.28125rem` |
| `--instui-component-skeleton-loader-text-padding-xxs` | `<length>` | `0.1875rem` |
| `--instui-size-interactive-height-md` | `<length>` | `2.5rem` |
| `--pantoken-skeleton-height` | `<length>` | `1.5rem` |
| `--pantoken-skeleton-padding` | `<length>` | `0.1875rem` |
| `--pantoken-skeleton-radius` | `<length>` | `0.25rem` |