2018-08-22 23:34:36 +08:00
---
category: Components
2018-09-29 17:08:44 +08:00
type: Feedback
2018-08-22 23:34:36 +08:00
title: Skeleton
cols: 1
---
2019-04-19 22:39:21 +08:00
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
2019-05-07 14:57:32 +08:00
2018-08-22 23:34:36 +08:00
## When To Use
2019-04-19 22:39:21 +08:00
- 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.
2018-08-22 23:34:36 +08:00
## API
### Skeleton
2019-11-20 17:46:50 +08:00
| 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 |
2018-08-22 23:34:36 +08:00
### SkeletonAvatarProps
2019-12-03 13:33:04 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect, only valid when used avatar independently. | boolean | false |
| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - |
| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
2018-08-22 23:34:36 +08:00
### SkeletonTitleProps
2019-11-20 17:46:50 +08:00
| Property | Description | Type | Default |
| -------- | ---------------------- | ---------------- | ------- |
| width | Set the width of title | number \| string | - |
2018-08-22 23:34:36 +08:00
### SkeletonParagraphProps
2019-11-20 17:46:50 +08:00
| 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 > | - |
2019-11-21 20:23:56 +08:00
### SkeletonButtonProps
| Property | Description | Type | Default |
| -------- | ----------------------- | ------------------------------------ | ------- |
| active | Show animation effect | boolean | false |
| size | Set the size of button | Enum{ 'large', 'small', 'default' } | - |
| shape | Set the shape of button | Enum{ 'circle', 'round', 'default' } | - |
2019-12-19 11:56:50 +08:00
### SkeletonInputProps
| Property | Description | Type | Default |
| -------- | ---------------------- | ----------------------------------- | ------- |
| active | Show animation effect | boolean | false |
| size | Set the size of button | Enum{ 'large', 'small', 'default' } | - |