New to Kendo UI for Vue? Start a free 30-day trial

Customizing Skeleton

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radiusNumber00
Description
The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The border radius of the circular Skeleton.
$kendo-skeleton-item-bgStringif($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-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the Skeleton wave animation.

In this article

Not finding the help you need?