ant-design-vue/components/skeleton/index.en-US.md

category	type	title	cover	coverDark
Components	Feedback	Skeleton	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original

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	false
loading	Display the skeleton when true	boolean	-
paragraph	Show paragraph placeholder	boolean | SkeletonParagraphProps	true
title	Show title placeholder	boolean | SkeletonTitleProps	true

SkeletonAvatarProps

Property	Description	Type	Default
shape	Set the shape of avatar	circle | square	-
size	Set the size of avatar	number | large | small | default	-

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 (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	-