Overview
tng-skeleton displays a placeholder for content while loading. Supports variant (text | circular | rectangular), widthClass / heightClass for Tailwind sizing, shimmer or pulse animation, and slot-based micro styling.
Quick example
Basic
<tng-skeleton />
<tng-skeleton variant="circular" widthClass="w-12" heightClass="h-12" />
<tng-skeleton variant="rectangular" heightClass="h-32" [slot]="{ container: 'bg-border/50' }" />
import { TngSkeleton } from '@tailng-ui/ui/primitives';
// Text line (default)
<tng-skeleton />
// Circular avatar placeholder
<tng-skeleton variant="circular" widthClass="w-12" heightClass="h-12" />
// Rectangular card with slot override
<tng-skeleton variant="rectangular" heightClass="h-32" [slot]="{ container: 'bg-border/50' }" />
Features
variant
text (default), circular (avatar), rectangular (card/image placeholder).
widthClass / heightClass
Tailwind sizing (w-full, h-4, w-12, h-12). Default: w-full h-4.
shimmer
shimmer=true: shimmer animation. false: animate-pulse.
slot
Slot-based micro styling: container for extra classes (e.g. bg-border/50).