Skeleton

<div
  class="flex w-full max-w-sm items-center gap-3"
  role="status"
  aria-busy="true"
  aria-label="Loading profile"
>
  <Skeleton.skeleton shape={:circle} class="size-12 shrink-0" />
  <div class="flex-1 space-y-2">
    <Skeleton.skeleton class="w-2/3" />
    <Skeleton.skeleton class="w-full" />
  </div>
</div>

<div
  role="status"
  aria-busy="true"
  aria-label="Loading article"
  class="w-full max-w-sm rounded-xl border border-border bg-card p-4 shadow-sm"
>
  <div class="space-y-2">
    <Skeleton.skeleton class="w-2/3" />
    <Skeleton.skeleton class="w-1/2" />
  </div>
  <Skeleton.skeleton shape={:rounded} class="mt-5 aspect-video w-full" />
</div>

<div class="flex flex-wrap items-end justify-center gap-6">
  <Skeleton.skeleton shape={:circle} class="size-12" />
  <Skeleton.skeleton shape={:rounded} class="h-20 w-32" />
  <Skeleton.skeleton shape={:rectangle} class="h-20 w-32" />
  <Skeleton.skeleton class="w-32" />
</div>

<div class="grid w-full max-w-sm gap-3">
  <div class="grid grid-cols-[4rem_1fr] items-center gap-3 text-xs text-muted-foreground">
    <span>Pulse</span>
    <Skeleton.skeleton />
  </div>
  <div class="grid grid-cols-[4rem_1fr] items-center gap-3 text-xs text-muted-foreground">
    <span>Shine</span>
    <Skeleton.skeleton animation={:shine} />
  </div>
  <div class="grid grid-cols-[4rem_1fr] items-center gap-3 text-xs text-muted-foreground">
    <span>None</span>
    <Skeleton.skeleton animation={:none} />
  </div>
</div>