CngxCardSkeleton
projects/common/card/card-skeleton.component.ts
Import#
import { CngxCardSkeleton } from '@cngx/common/card'
Description#
Skeleton placeholder for card content during loading.
Renders shimmer rectangles that match typical card layout patterns.
Use alongside @if (loading()) to swap real content with the skeleton.
<cngx-card [loading]="loading()">
@if (loading()) {
<cngx-card-skeleton [lines]="3" [showMedia]="true" />
} @else {
<header cngxCardHeader>...</header>
<div cngxCardBody>...</div>
}
</cngx-card>Metadata#
Host#
Default visuals for CngxCardSkeleton. The host carries
.cngx-card-skeleton and stacks three placeholder bars vertically.
All three share the same shimmer gradient so the placeholder reads
as a single moving element rather than three separate animations.
Slots
.cngx-card-skeleton__media- hero image placeholder block.cngx-card-skeleton__title- title bar (55% width).cngx-card-skeleton__line- body text-line bar (repeats)
Reduced motion
Under prefers-reduced-motion: reduce the animated gradient is
dropped and all three bars fall back to a flat opacity: 0.7 dim.
Inheritance
Leaf tokens with no fallback chain - geometry and shimmer colors
are component-local. The dark-mode swap rewrites the two surface
tokens at :root.
Dark mode
Three hooks lift the shimmer band one step above the dark surface so the moving stripe stays visible against a dark page:
prefers-color-scheme: dark[data-color-scheme="dark"][data-color-scheme="light"](explicit light pin)
Both surface tokens carry inherits: true so the :root swap
reaches the gradient fill on each slot.
Index#
Layout
Surface
<color>oklch(0.96 0.005 250)Highlight color of the shimmer gradient.