# Skeleton

> Placeholder block shown while content is loading. Default height matches the surrounding line height (1lh).

Source: https://ngwr.dev/reference/components/skeleton  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrSkeleton } from 'ngwr/skeleton';

@Component({ imports: [WrSkeleton] })
export class MyComponent {}
```

## Basic usage

```html
<wr-skeleton />
```

## Colors

```html
<wr-skeleton color="primary" />
<wr-skeleton color="success" />
```

## Custom shape

Override --wr-skeleton-height and --wr-skeleton-radius for blocks, cards, avatars, etc.

```html
<wr-skeleton style="--wr-skeleton-height: 4rem; --wr-skeleton-radius: 1rem" />
```

## Static

Disable the shimmer animation.

```html
<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` |