Customizing Skeleton
Variables
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-skeleton-text-transform | scale( 1, .6 ) | ||
Description
The transform scale of the Skeleton text. | |||
$kendo-skeleton-text-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the Skeleton text. | |||
$kendo-skeleton-rect-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the rectangular Skeleton. | |||
$kendo-skeleton-circle-border-radius | 9999px | ||
Description
The border radius of the circular Skeleton. | |||
$kendo-skeleton-item-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | ||
Description
The background color of the Skeleton item. | |||
$kendo-skeleton-wave-bg | if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) | ||
Description
The background color of the Skeleton wave animation. |