Skeleton Component
Display Skeleton component with different styles and types.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
variant | "line" | "rect" | "circle" | "line" | The variant of the skeleton. |
animation-mode | "progress" | "pulse" | "none" | "progress" | The animation mode of the skeleton. |
width | string | "100%" | The width value of the skeleton. |
height | string | "20px" | The height value of the skeleton. |
CSS Parts
| Name | Description |
|---|---|
skeleton | The skeleton element |
Check this link to learn how to use CSS parts for Skeleton Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-skeleton-background | --tap-sys-color-surface-tertiary | Background color of the skeleton |
--tap-skeleton-radius | --tap-sys-radius-2 | Border radius of the skeleton |
--tap-skeleton-width | 100% | Width of the skeleton |
--tap-skeleton-height | --tap-sys-spacing-8 | Height of the skeleton |
--tap-skeleton-rect-radius | --tap-sys-spacing-0 | Border radius of the skeleton variant rect |
--tap-skeleton-circle-radius | --tap-sys-radius-full | Border radius of the skeleton variant circle |
--tap-skeleton-circle-width | --tap-sys-spacing-10 | Width of the skeleton variant circle |
--tap-skeleton-circle-height | --tap-sys-spacing-10 | Height of the skeleton variant circle |