Skeleton
@xui/skeletonTurn an existing element into a loading placeholder in place.
Install
pnpm add @xui/skeleton Add the barrel to a standalone component's imports:
import { XuiSkeletonImports } from '@xui/skeleton';
@Component({
imports: [XuiSkeletonImports],
// …
})Examples
Default
Loading preview…
<div class="flex w-fit items-center gap-4">
<xui-skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<xui-skeleton class="h-4 w-[250px]" />
<xui-skeleton class="h-4 w-[200px]" />
</div>
</div>Mask in place
Loading preview…
<div class="grid max-w-2xl grid-cols-2 gap-8">
<div class="space-y-3">
<p xuiText color="subtle" size="sm">loading</p>
<h3 xuiHeading xuiSkeleton>Quarterly report</h3>
<p xuiText color="muted" xuiSkeleton>
Revenue grew by 12% against the previous quarter, driven mainly by renewals.
</p>
<button xuiButton xuiSkeleton>Download</button>
</div>
<div class="space-y-3">
<p xuiText color="subtle" size="sm">loaded</p>
<h3 xuiHeading>Quarterly report</h3>
<p xuiText color="muted">
Revenue grew by 12% against the previous quarter, driven mainly by renewals.
</p>
<button xuiButton>Download</button>
</div>
</div>API
Turn an existing element into a loading placeholder in place.
Inputs
activebooleanWhether the placeholder is showing. Bare xuiSkeleton means always on; bind it to toggle.trueA placeholder block standing in for content that has not loaded.
Inputs
classClassValueThe user-defined classes''