---
type: Feedback
category: Components
title: Skeleton
---

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

## When To Use

- When a resource needs long time to load.
- When the component contains lots of information, such as List or Card.
- Only works when loading data for the first time.
- Could be replaced by Spin in any situation, but can provide a better user experience.

## API

### Skeleton

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect | boolean | false |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | Display the skeleton when `true` | boolean | - |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| grid | 栅格占位配置 | [SkeletonGridProps](#SkeletonGridProps) | - |

### SkeletonAvatarProps

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect, only valid when used avatar independently. | boolean | false |
| size | Set the size of avatar | number \| `large` \| `small` \| `default` } | - |
| shape | Set the shape of avatar | `circle` \| `square` | - |

### SkeletonTitleProps

| Property | Description            | Type             | Default |
| -------- | ---------------------- | ---------------- | ------- |
| width    | Set the width of title | number \| string | -       |

### SkeletonParagraphProps

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| rows | Set the row count of paragraph | number | - |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |

### SkeletonButtonProps

| Property | Description             | Type                             | Default |
| -------- | ----------------------- | -------------------------------- | ------- |
| active   | Show animation effect   | boolean                          | false   |
| size     | Set the size of button  | `large` \| `small` \| `default`  | -       |
| shape    | Set the shape of button | `circle` \| `round` \| `default` | -       |

### SkeletonInputProps

| Property | Description            | Type                            | Default |
| -------- | ---------------------- | ------------------------------- | ------- |
| active   | Show animation effect  | boolean                         | false   |
| size     | Set the size of button | `large` \| `small` \| `default` | -       |

### SkeletonGridProps

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| rows | 行数 | number | - |
| column | 列数 | number | - |
| gutter | 栅格间隔 | number | 0 |
| xs | `<576px` 展示的列数 | number | - |
| sm | `≥576px` 展示的列数 | number | - |
| md | `≥768px` 展示的列数 | number | - |
| lg | `≥992px` 展示的列数 | number | - |
| xl | `≥1200px` 展示的列数 | number | - |
| xxl | `≥1600px` 展示的列数 | number | - |