import { Component } from '@angular/core';
import { WrSkeleton } from 'ngwr/skeleton';
@Component({ imports: [WrSkeleton] })
export class MyComponent {}Skeleton
A placeholder block shown while content loads.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
A skeleton is one line high by default.
<wr-skeleton />Colors
<wr-skeleton color="primary" />
<wr-skeleton color="success" />Custom shape
Set --wr-skeleton-height and --wr-skeleton-radius for avatars and cards.
<wr-skeleton style="--wr-skeleton-height: 4rem; --wr-skeleton-radius: 1rem" />Static
[animated]="false" stops the shimmer.
<wr-skeleton [animated]="false" />API
| Name | Description | Type | Default |
|---|---|---|---|
color | Intent tint for the placeholder. null, the default, paints the neutral gray a placeholder almost always wants. It used to default to the light intent, chosen because that one token was theme-stable — slate-300 on white, slate-800 on near-black. The neutral ramp does that job now and does it by construction, so the default is the absence of an intent rather than a particular one. An intent here tints a thing that is not yet content, so reach for it only when the placeholder stands in for something the colour already identifies. | WrColor | null | null |
animated | Whether the shimmer animation runs. | boolean | true |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/skeleton's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-skeleton-height | 1lh | .wr-skeleton |
--wr-skeleton-radius | var(--wr-border-radius-base) | .wr-skeleton |