Headless skeleton loading placeholder
CngxSkeleton
DirectivePrimaryv0.1.0WCAG AA
projects/common/layout/text/skeleton.directive.ts
Import#
import { CngxSkeleton } from '@cngx/common/layout'
Description#
Headless skeleton loading placeholder.
Toggles between loading and content states via CSS classes and ARIA attributes. No template -- the consumer renders the skeleton UI.
Exposes an indices() signal for @for rendering of repeated skeleton elements.
Respects prefers-reduced-motion (disables shimmer animation class).
Basic loading placeholder
<div [cngxSkeleton]="isLoading()" #sk="cngxSkeleton">
@if (sk.loading()) {
@for (i of sk.indices(); track i) {
<div class="skeleton-line" aria-hidden="true"></div>
}
} @else {
<p>{{ content() }}</p>
}
</div>Card list with repeat count
<div [cngxSkeleton]="loading()" [count]="3" #sk="cngxSkeleton">
@if (sk.loading()) {
@for (i of sk.indices(); track i) {
<div class="skeleton-card" aria-hidden="true">
<div class="skeleton-avatar"></div>
<div class="skeleton-line"></div>
</div>
}
} @else {
@for (card of cards(); track card.id) {
<app-card [data]="card" />
}
}
</div>