Installation
import { WrSkeleton } from 'ngwr/skeleton';
@Component({ imports: [WrSkeleton] })
export class MyComponent {}Basic usage
<wr-skeleton />Colors
<wr-skeleton color="primary" />
<wr-skeleton color="success" />Custom shape
Override --wr-skeleton-height and --wr-skeleton-radius for blocks, cards, avatars, etc.
<wr-skeleton style="--wr-skeleton-height: 4rem; --wr-skeleton-radius: 1rem" />Static
Disable the shimmer animation.
<wr-skeleton [animated]="false" />API
| Name | Description | Type | Default |
|---|---|---|---|
color | Color tint for the placeholder. Default is 'light' because it's theme-stable — the light token is slate-300 in light mode (subtle gray on white) and slate-800 in dark mode (subtle lift on near-black). The 'dark' value flips to a near- white wash in dark mode and breaks the placeholder affordance. | WrColor | 'light' |
animated | Whether the shimmer animation runs. | boolean | true |
CSS variables
Custom properties ngwr/skeleton publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-skeleton-height | 1lh | .wr-skeleton |
--wr-skeleton-radius | var(--wr-border-radius-base) | .wr-skeleton |