Sigta UI · Kit
Skeleton
Variants
Source
<div class="flex flex-col gap-4 max-w-md">
<sigta:skeleton variant="heading" />
<sigta:skeleton />
<sigta:skeleton class="w-4/5" />
<sigta:skeleton variant="block" />
<sigta:skeleton variant="circle" />
</div>
Composed — card loading state
Source
<div class="max-w-md">
<sigta:card :hover="false">
<x-slot:thumb>
<sigta:skeleton variant="block" class="rounded-none size-full" />
</x-slot:thumb>
<div class="flex items-center gap-3 mb-4">
<sigta:skeleton variant="circle" />
<div class="flex-1 flex flex-col gap-2">
<sigta:skeleton class="w-1/3" />
<sigta:skeleton class="w-1/2 h-3" />
</div>
</div>
<sigta:skeleton variant="heading" />
<div class="flex flex-col gap-2 mt-3">
<sigta:skeleton />
<sigta:skeleton class="w-5/6" />
</div>
</sigta:card>
</div>