2021-09-25 16:51:32 +08:00
---
category: Components
type: Feedback
title: Skeleton
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
---
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 |
## SkeletonAvatarProps
2021-12-05 01:06:31 +08:00
| Property | Description | Type | Default |
| -------- | ----------------------- | ----------------------------------------- | ------- |
| shape | Set the shape of avatar | `circle` \| `square` | - |
2022-03-12 09:56:32 +08:00
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
2021-09-25 16:51:32 +08:00
### 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 | - |
2022-03-12 09:56:32 +08:00
| 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 (3.0+)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | |
| block | Option to fit button width to its parent width | boolean | false | |
| shape | Set the shape of button | `circle` \| `round` \| `default` | - | |
| size | Set the size of button | `large` \| `small` \| `default` | - | |
### SkeletonInputProps (3.0+)
| Property | Description | Type | Default |
| -------- | --------------------- | ------------------------------- | ------- |
| active | Show animation effect | boolean | false |
| size | Set the size of input | `large` \| `small` \| `default` | - |