2018-08-22 23:34:36 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Feedback
2018-08-22 23:34:36 +08:00
title: Skeleton
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
2018-08-22 23:34:36 +08:00
---
2022-11-17 18:49:41 +08:00
Provide a placeholder while you wait for content to load, or to visualize 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
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/complex.tsx" > Complex combination< / code >
< code src = "./demo/active.tsx" > Active Animation< / code >
< code src = "./demo/element.tsx" > Button/Avatar/Input/Image/Node< / code >
< code src = "./demo/children.tsx" > Contains sub component< / code >
< code src = "./demo/list.tsx" > List< / code >
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 |
2022-12-22 14:12:26 +08:00
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps ](#skeletonavatarprops ) | false |
2020-07-02 16:13:17 +08:00
| loading | Display the skeleton when true | boolean | - |
2022-12-22 14:12:26 +08:00
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps ](#skeletonparagraphprops ) | true |
2020-07-02 16:13:17 +08:00
| round | Show paragraph and title radius when true | boolean | false |
2022-12-22 14:12:26 +08:00
| 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 |
| --- | --- | --- | --- |
2020-07-02 16:13:17 +08:00
| active | Show animation effect, only valid when used avatar independently | boolean | false |
2020-01-17 17:23:48 +08:00
| shape | Set the shape of avatar | `circle` \| `square` | - |
2020-10-21 10:33:43 +08:00
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
2018-08-22 23:34:36 +08:00
### SkeletonTitleProps
2021-06-10 00:38:55 +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 | - |
2020-10-21 10:33:43 +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> | - |
2019-11-21 20:23:56 +08:00
### SkeletonButtonProps
2021-11-12 11:46:42 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | |
| block | Option to fit button width to its parent width | boolean | false | 4.17.0 |
2022-06-24 12:30:47 +08:00
| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - | |
2021-11-12 11:46:42 +08:00
| size | Set the size of button | `large` \| `small` \| `default` | - | |
2019-12-19 11:56:50 +08:00
### SkeletonInputProps
2021-06-10 00:38:55 +08:00
| Property | Description | Type | Default |
| -------- | --------------------- | ------------------------------- | ------- |
| active | Show animation effect | boolean | false |
| size | Set the size of input | `large` \| `small` \| `default` | - |