Skeleton
Displays a placeholder while content is loading
Theme
<sa-card class="w-full">
<sa-card-header>
<sa-skeleton class="h-4 w-2/3"/>
<sa-skeleton class="h-4 w-1/2"/>
</sa-card-header>
<sa-card-content>
<sa-skeleton class="aspect-square w-full"/>
</sa-card-content>
</sa-card>Usage
<sa-skeleton class="..." />By default, the Skeleton Tag Helper only defines the color and the pulsing animation. The shape and outline of the skeleton is defined using Tailwind's width and height utility classes.
Examples
Avatar
A round skeleton for the avatar next to two text lines.
Theme
<div class="flex w-full items-center gap-4">
<sa-skeleton class="size-10 shrink-0 rounded-full"/>
<div class="grid gap-2">
<sa-skeleton class="h-4 w-[150px]"/>
<sa-skeleton class="h-4 w-[100px]"/>
</div>
</div>Text
Stack skeletons of different widths to stand in for a paragraph.
Theme
<div class="flex w-full flex-col gap-2">
<sa-skeleton class="h-4 w-full"/>
<sa-skeleton class="h-4 w-full"/>
<sa-skeleton class="h-4 w-3/4"/>
</div>Form
Skeleton placeholders for labels and inputs while a form loads.
Theme
<div class="flex w-full flex-col gap-7">
<div class="flex flex-col gap-3">
<sa-skeleton class="h-4 w-20"/>
<sa-skeleton class="h-10 w-full"/>
</div>
<div class="flex flex-col gap-3">
<sa-skeleton class="h-4 w-24"/>
<sa-skeleton class="h-10 w-full"/>
</div>
<sa-skeleton class="h-9 w-24"/>
</div>Table
Rows of skeletons in a grid to stand in for a table.
Theme
<div class="flex w-full flex-col gap-2">
<div class="flex gap-4">
<sa-skeleton class="h-4 flex-1"/>
<sa-skeleton class="h-4 w-24"/>
<sa-skeleton class="h-4 w-20"/>
</div>
<div class="flex gap-4">
<sa-skeleton class="h-4 flex-1"/>
<sa-skeleton class="h-4 w-24"/>
<sa-skeleton class="h-4 w-20"/>
</div>
<div class="flex gap-4">
<sa-skeleton class="h-4 flex-1"/>
<sa-skeleton class="h-4 w-24"/>
<sa-skeleton class="h-4 w-20"/>
</div>
</div>API Reference
<sa-skeleton>
Renders a <div> element.