ant-design/components/skeleton/index.zh-CN.md

---
category: Components
subtitle: 骨架屏
type: 反馈
title: Skeleton
cols: 1
---

在需要等待加载内容的位置提供一个占位图形组合。

## 何时使用

- 网络较慢，需要长时间等待加载处理的情况下。
- 图文信息内容较多的列表/卡片中。
- 只在第一次加载数据的时候使用。
- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

## API

### Skeleton

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| round | 为 `true` 时，段落和标题显示圆角 | boolean | false |

### SkeletonAvatarProps

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
| shape | 指定头像的形状 | `circle` \| `square` | - |

### SkeletonTitleProps

| 属性  | 说明                 | 类型             | 默认值 |
| ----- | -------------------- | ---------------- | ------ |
| width | 设置标题占位图的宽度 | number \| string | -      |

### SkeletonParagraphProps

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| rows | 设置段落占位图的行数 | number | - |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |

### SkeletonButtonProps

| 属性   | 说明             | 类型                             | 默认值 |
| ------ | ---------------- | -------------------------------- | ------ |
| active | 是否展示动画效果 | boolean                          | false  |
| size   | 设置按钮的大小   | `large` \| `small` \| `default`  | -      |
| shape  | 指定按钮的形状   | `circle` \| `round` \| `default` | -      |

### SkeletonInputProps

| 属性   | 说明             | 类型                            | 默认值 |
| ------ | ---------------- | ------------------------------- | ------ |
| active | 是否展示动画效果 | boolean                         | false  |
| size   | 设置按钮的大小   | `large` \| `small` \| `default` | -      |
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00			`---`
			`category: Components`
Update index.zh-CN.md 2018-10-26 00:13:54 +08:00			`subtitle: 骨架屏`
:globe_with_meridians: site: transition component category, close #11629 2018-11-04 16:20:35 +08:00			`type: 反馈`
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00			`title: Skeleton`
			`cols: 1`
			`---`

Update index.zh-CN.md 2018-10-26 00:13:54 +08:00			`在需要等待加载内容的位置提供一个占位图形组合。`
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00
			`## 何时使用`

			`- 网络较慢，需要长时间等待加载处理的情况下。`
			`- 图文信息内容较多的列表/卡片中。`
改进 skeleton 首次加载数据使用场景描述 (#19700) 2019-11-12 22:43:50 +08:00			`- 只在第一次加载数据的时候使用。`
:memo: upgrade some documentations for progress and skeleton 2019-01-29 15:23:23 +08:00			`- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。`
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00
			`## API`

			`### Skeleton`

docs: Removed version column in 4.0 (#19832) 2019-11-20 17:46:50 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| --- \| --- \| --- \| --- \|`
			`\| active \| 是否展示动画效果 \| boolean \| false \|`
			`\| avatar \| 是否显示头像占位图 \| boolean \\| [SkeletonAvatarProps](#SkeletonAvatarProps) \| false \|`
			\| loading \| 为 `true` 时，显示占位图。反之则直接展示子组件 \| boolean \| - \|
			`\| paragraph \| 是否显示段落占位图 \| boolean \\| [SkeletonParagraphProps](#SkeletonParagraphProps) \| true \|`
			`\| title \| 是否显示标题占位图 \| boolean \\| [SkeletonTitleProps](#SkeletonTitleProps) \| true \|`
feat: Skeleton add round prop (#24137) * feat: Skeleton add round prop * update snapshot * fix snapshot 2020-05-16 13:19:54 +08:00			\| round \| 为 `true` 时，段落和标题显示圆角 \| boolean \| false \|
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00
			`### SkeletonAvatarProps`

feat: add skeleton avatar (#19898) * move avatar default props into skeleton * #18237 complete skeleton avatar * update skeleton avatar docs * add more tests for skeleton avatar * refactor class and props name * revert Avatar props name * combine avatar and button demo * update demo and test snapshots * move active props into element 2019-12-03 13:33:04 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| --- \| --- \| --- \| --- \|`
			`\| active \| 是否展示动画效果，仅在单独使用头像骨架时生效 \| boolean \| false \|`
docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			\| size \| 设置头像占位图的大小 \| number \\| `large` \\| `small` \\| `default` \| - \|
			\| shape \| 指定头像的形状 \| `circle` \\| `square` \| - \|
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00
			`### SkeletonTitleProps`

docs: Removed version column in 4.0 (#19832) 2019-11-20 17:46:50 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| ----- \| -------------------- \| ---------------- \| ------ \|`
			`\| width \| 设置标题占位图的宽度 \| number \\| string \| - \|`
New Component Skeleton (#11226) * Add new component Skeleton * Add related doc * Add sample * Add test case ref: https://github.com/ant-design/ant-design/issues/10308 2018-08-22 23:34:36 +08:00
			`### SkeletonParagraphProps`

docs: Removed version column in 4.0 (#19832) 2019-11-20 17:46:50 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| --- \| --- \| --- \| --- \|`
			`\| rows \| 设置段落占位图的行数 \| number \| - \|`
			`\| width \| 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 \| number \\| string \\| Array<number \\| string> \| - \|`
feat: Add skeleton button (#19699) * #18237 add skeleton button * update snapshot * refactoring demo code * lint code * update test snapshots * add test * update snapshot * fix deps lint issue * set avatar siz and update test snapshots * fix lint issue * remove button and just keep skeleton * add active switch for button demo * add size and shape radio for skeleton button demo * add button tests * add skeleton tests * update doc * update test snapshots * omit avatar and button props * refactoring skeleton and update test snapshots 2019-11-21 20:23:56 +08:00
			`### SkeletonButtonProps`

docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| ------ \| ---------------- \| -------------------------------- \| ------ \|`
			`\| active \| 是否展示动画效果 \| boolean \| false \|`
			\| size \| 设置按钮的大小 \| `large` \\| `small` \\| `default` \| - \|
			\| shape \| 指定按钮的形状 \| `circle` \\| `round` \\| `default` \| - \|
feat: add Input element for Skeleton (#20264) * complete skeleton input element (#18237) * update test snapshots * update skeleton doc * add more test for skeleton input * fix test snapshots issue 2019-12-19 11:56:50 +08:00
			`### SkeletonInputProps`

docs: Format string notation of all components (#20970) 2020-01-17 17:23:48 +08:00			`\| 属性 \| 说明 \| 类型 \| 默认值 \|`
			`\| ------ \| ---------------- \| ------------------------------- \| ------ \|`
			`\| active \| 是否展示动画效果 \| boolean \| false \|`
			\| size \| 设置按钮的大小 \| `large` \\| `small` \\| `default` \| - \|