Skeleton

A colour-neutral content placeholder shown while real content loads — it mirrors the shape of the eventual content (text lines, an image rectangle, an avatar circle) to cut layout shift. Decorative (aria-hidden); announce the loading state on the surrounding region.

animate (shimmer)

Shapes

text

rect

circle

<script>
  import { Skeleton } from '@spaethtech/svelte-ui';
</script>

<Skeleton shape="text" width="12rem" />
<Skeleton shape="rect" height={120} />
<Skeleton shape="circle" height={48} />

Multi-line text

<!-- Multiple text lines; the last line is shortened -->
<Skeleton shape="text" lines={4} />

Composed — a card

Compose primitives to sketch the real layout.

<script>
  import { Skeleton, Card } from '@spaethtech/svelte-ui';
</script>

<Card class="p-4 max-w-sm">
  <div class="flex items-center gap-3">
    <Skeleton shape="circle" height={40} />
    <div class="flex-1">
      <Skeleton shape="text" width="60%" />
      <div class="mt-2"><Skeleton shape="text" width="40%" /></div>
    </div>
  </div>
  <div class="mt-4"><Skeleton shape="rect" height={140} /></div>
  <div class="mt-4"><Skeleton shape="text" lines={3} /></div>
</Card>