Skeleton

A pulsing placeholder used to indicate loading state while content is being fetched.

<.skeleton></.skeleton>

Examples

Common shapes

Skeletons sized to mimic text lines, avatars, and card blocks.

<div class="flex flex-col gap-4">
  <.skeleton class="h-4 w-[250px]" />
  <.skeleton class="size-12 rounded-full" />
  <.skeleton class="h-[120px] w-[300px] rounded-xl" />
  <.skeleton class="h-9 w-24" />
</div>

Card skeleton

Composed skeleton mimicking a card with an avatar, title, and body lines.

<div class="flex items-start gap-4 p-4 w-[320px]">
  <.skeleton class="size-12 rounded-full shrink-0" />
  <div class="flex flex-col gap-2 flex-1">
    <.skeleton class="h-4 w-3/4" />
    <.skeleton class="h-3 w-full" />
    <.skeleton class="h-3 w-5/6" />
  </div>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot