Skeleton
Displays a placeholder while content is loading.
<sa-group gap="Small" align="Center">
<sa-skeleton class="size-12 rounded-full"/>
<sa-stack gap="Small">
<sa-skeleton class="h-4 w-[250px]"/>
<sa-skeleton class="h-4 w-[200px]"/>
</sa-stack>
</sa-group>Usage
<sa-skeleton class="..." />By default, the Skeleton Tag Helper only defines the color and shimmering animation effect. The shape and outline of the skeleton is defined using Tailwind's width and height utility classes.
Examples
Card
<sa-stack>
<sa-skeleton class="h-[125px] w-[250px] rounded-xl" />
<sa-stack gap="Small">
<sa-skeleton class="h-4 w-[250px]" />
<sa-skeleton class="h-4 w-[200px]" />
</sa-stack>
</sa-stack>