Skeleton

Loading placeholder.

Size it with class (e.g. h-4 w-32). The pulse is an opacity animation, so it settles static under prefers-reduced-motion.

Feedback

<script lang="ts">
	import { Skeleton } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Skeleton class="size-10 rounded-full" />
<div class="flex flex-1 flex-col gap-2">
	<Skeleton class="h-4 w-1/3" />
	<Skeleton class="h-3 w-2/3" />
</div>
<Skeleton class="h-8 w-16" />

Feedback · Badge · Alert · Progress · Spinner · Toaster · Avatar · Image

---

← All components · Getting started · Theming · source