Skeleton

A placeholder in the shape of the content that has not arrived yet. Size it where you use it. Kobalte's Skeleton drives it with data-visible and data-animate.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`skeleton`	A shimmering block. Give it a width and a height

Basic

<div class="card" style="width: 18rem">
  <div class="skeleton" style="height: 1.2rem; width: 60%; margin-bottom: 0.5rem"></div>
  <div class="skeleton" style="height: 1rem; margin-bottom: 0.35rem"></div>
  <div class="skeleton" style="height: 1rem; width: 80%"></div>
</div>

<div class="card" style="width: 18rem">
  <div class="skeleton" style="height: 1.2rem; width: 60%; margin-bottom: 0.5rem"></div>
  <div class="skeleton" style="height: 1rem; margin-bottom: 0.35rem"></div>
  <div class="skeleton" style="height: 1rem; width: 80%"></div>
</div>

import { Skeleton } from "@kobalte/core/skeleton";

<Skeleton class="skeleton" visible={loading()} height={20} radius={4}>
  <p>{post().title}</p>
</Skeleton>

<div class="card" style="width: 18rem">
  <div class="skeleton" data-visible data-animate style="height: 1.2rem; width: 60%; margin-bottom: 0.5rem"></div>
  <div class="skeleton" data-visible data-animate style="height: 1rem; margin-bottom: 0.35rem"></div>
  <div class="skeleton" data-visible data-animate style="height: 1rem; width: 80%"></div>
</div>

The shimmer stops under prefers-reduced-motion, and a Kobalte skeleton with data-visible removed goes transparent so the real content shows through. Kobalte's own part has no role, so the class goes on it by hand.