New to Kendo UI for Angular? Start a free 30-day trial
Customizing Skeleton
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-skeleton-text-transform | String | scale( 1, .6 ) | scale(1, 0.6) |
Description
The transform scale of the Skeleton text. | |||
| $kendo-skeleton-text-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
Description
The border radius of the Skeleton text. | |||
| $kendo-skeleton-rect-border-radius | Number | 0 | 0 |
Description
The border radius of the rectangular Skeleton. | |||
| $kendo-skeleton-circle-border-radius | Number | 9999px | 9999px |
Description
The border radius of the circular Skeleton. | |||
| $kendo-skeleton-item-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent) |
Description
The background color of the Skeleton item. | |||
| $kendo-skeleton-wave-bg | Color | rgba( black, .04 ) | rgba(0, 0, 0, 0.04) |
Description
The background color of the Skeleton wave animation. | |||