Skeleton

Skeleton is low-fidelity visual placeholder that represents the loading of an interface element before it is displayed on the page. Skeleton should be used for dynamic content only.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="medium">
                                                            <w-skeleton height="24px" shape="default" width="48px"></w-skeleton>
                                                            <w-skeleton height="24px" shape="circle" width="24px"></w-skeleton>
                                                            <w-skeleton height="24px" shape="pill" width="50%"></w-skeleton>
                                                          </w-stack>
                                                        </template>

Props

Skeleton

Name	Description	Type	Default	Values
height	Sets height of the skeleton	string\|number	24	Examples: 24, '24px', '50%', 'auto'
shape	Defines a shape of the skeleton	string	default	default, circle, pill
width	Sets width of the skeleton	string\|number	24	Examples: 24, '24px', '50%', 'auto'
animate	Defines if the skeleton should be animated	boolean	true	true, false

SkeletonText

Name	Description	Type	Default	Values
lines	Sets height of the skeleton	number	1
width	Sets width of the skeleton	string\|number	'100%'	Examples: 24, '24px', '50%', 'auto'
variant	Defines a shape of the skeleton	string	body	body, caption, subSectionHeading, sectionHeading, displayHeading
animate	Defines if the skeleton should be animated	boolean	true	true, false