# Skeleton

> Source: https://design.nanatec.co.ke/components/skeleton/
> A placeholder that mimics the shape of content while it loads. Supports text lines, circles (avatars), and rectangles (images/cards) with shimmer, pulse, or wave animations. When `loading` becomes false the skeleton fades out smoothly.

A placeholder that mimics the shape of content while it loads. Supports text lines, circles (avatars), and rectangles (images/cards) with shimmer, pulse, or wave animations. When `loading` becomes false the skeleton fades out smoothly.

## Preview

```html
<nana-skeleton style="width:220px;height:1rem"></nana-skeleton>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/skeleton";
```

## Basic usage

```html
<nana-skeleton style="width:220px;height:1rem"></nana-skeleton>
```

## Animations

```html
<nana-skeleton animation="shimmer" style="width:220px;height:1rem"></nana-skeleton>
<nana-skeleton animation="pulse" style="width:220px;height:1rem"></nana-skeleton>
<nana-skeleton animation="wave" style="width:220px;height:1rem"></nana-skeleton>
<nana-skeleton animation="none" style="width:220px;height:1rem"></nana-skeleton>
```

## Multiple lines

Use `count` to render several placeholder lines.

```html
<nana-skeleton count="3" style="width:100%"></nana-skeleton>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Optional content revealed when loading completes |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-skeleton-radius` | — | Corner radius override |
| `--nana-skeleton-height` | — | Height override |
| `--nana-skeleton-width` | — | Width override |
| `--nana-skeleton-gap` | — | Gap between items when count > 1 |
| `--nana-skeleton-fade-duration` | — | Fade-out transition duration (default 200ms) |

## CSS Parts

| Part | Description |
|---|---|
| `base` | Each skeleton item |
| `wrapper` | The container wrapping all items (when count > 1) |

## Related components

<ul class="related not-content">
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/tag/">Tag</a></li>
  <li><a href="/components/spinner/">Spinner</a></li>
  <li><a href="/components/progress-bar/">Progress Bar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-skeleton--docs