Skeleton
The ty-skeleton component is used to enhance the user experience during data loading by providing a placeholder which simulates the layout of the content that is loading.
Usage
The ty-skeleton can be configured for different sizes and shapes by setting its properties. It supports both rectangle and circle shapes.
Live Editor
<ty-skeleton width="70%" height="20px" shape="rectangle"></ty-skeleton>
Result
Loading...
Shapes
The ty-skeleton can be used to create placeholders for different types of content, such as text lines, images, or avatars.
Rectangle
For a text line or content box:
<ty-skeleton width="100%" height="1em" shape="rectangle"></ty-skeleton>
Circle
For an avatar or profile image:
<ty-skeleton width="40px" height="40px" shape="circle"></ty-skeleton>
API
Properties
The ty-skeleton component accepts the following properties:
| Name | Description | Type | Default |
|---|---|---|---|
width | Specifies the width of the skeleton. | string | '100%' |
height | Specifies the height of the skeleton. | string | '1em' |
shape | Specifies the shape of the skeleton. | 'rectangle' | 'circle' | 'rectangle' |
loading | Specifies whether the skeleton is loading. | boolean | true |