Loader

Loaders are animated UI elements indicating that a page, section, or action is loading.

Sass Variables

The Telerik and Kendo UI Loader enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-loader-segment-border-radius50%50%Default: 50%Computed: 50%
Description: The border radius of the Loader segment.
kendo-loader-sm-segment-sizek-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The size of the small Loader segment.
kendo-loader-md-segment-sizek-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The size of the medium Loader segment.
kendo-loader-lg-segment-sizek-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The size of the large Loader segment.
kendo-loader-sm-paddingcalc( #{$kendo-loader-sm-segment-size} / 2 )calc(var(--kendo-spacing-1, 0.25rem) / 2)Default: calc( #{$kendo-loader-sm-segment-size} / 2 )Computed: calc(var(--kendo-spacing-1, 0.25rem) / 2)
Description: The padding of the small Loader.
kendo-loader-md-paddingcalc( #{$kendo-loader-md-segment-size} / 2 )calc(var(--kendo-spacing-2, 0.5rem) / 2)Default: calc( #{$kendo-loader-md-segment-size} / 2 )Computed: calc(var(--kendo-spacing-2, 0.5rem) / 2)
Description: The padding of the medium Loader.
kendo-loader-lg-paddingcalc( #{$kendo-loader-lg-segment-size} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)Default: calc( #{$kendo-loader-lg-segment-size} / 2 )Computed: calc(var(--kendo-spacing-4, 1rem) / 2)
Description: The padding of the large Loader.
kendo-loader-sm-spinner-3-widthcalc( #{$kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)Default: calc( #{$kendo-loader-sm-segment-size} * 4 )Computed: calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description: The width of the small spinner-3 Loader.
kendo-loader-md-spinner-3-widthcalc( #{$kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)Default: calc( #{$kendo-loader-md-segment-size} * 4 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description: The width of the medium spinner-3 Loader.
kendo-loader-lg-spinner-3-widthcalc( #{$kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)Default: calc( #{$kendo-loader-lg-segment-size} * 4 )Computed: calc(var(--kendo-spacing-4, 1rem) * 4)
Description: The width of the large spinner-3 Loader.
kendo-loader-sm-spinner-3-heightcalc( #{$kendo-loader-sm-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.8660254038)Default: calc( #{$kendo-loader-sm-spinner-3-width} * #{$equilateral-height} )Computed: calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.8660254038)
Description: The height of the small spinner-3 Loader.
kendo-loader-md-spinner-3-heightcalc( #{$kendo-loader-md-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.8660254038)Default: calc( #{$kendo-loader-md-spinner-3-width} * #{$equilateral-height} )Computed: calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.8660254038)
Description: The height of the medium spinner-3 Loader.
kendo-loader-lg-spinner-3-heightcalc( #{$kendo-loader-lg-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.8660254038)Default: calc( #{$kendo-loader-lg-spinner-3-width} * #{$equilateral-height} )Computed: calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.8660254038)
Description: The height of the large spinner-3 Loader.
kendo-loader-sm-spinner-4-widthcalc( #{$kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)Default: calc( #{$kendo-loader-sm-segment-size} * 4 )Computed: calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description: The width of the small spinner-4 Loader.
kendo-loader-md-spinner-4-widthcalc( #{$kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)Default: calc( #{$kendo-loader-md-segment-size} * 4 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description: The width of the medium spinner-4 Loader.
kendo-loader-lg-spinner-4-widthcalc( #{$kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)Default: calc( #{$kendo-loader-lg-segment-size} * 4 )Computed: calc(var(--kendo-spacing-4, 1rem) * 4)
Description: The width of the large spinner-4 Loader.
kendo-loader-sm-spinner-4-height$kendo-loader-sm-spinner-4-widthcalc(var(--kendo-spacing-1, 0.25rem) * 4)Default: $kendo-loader-sm-spinner-4-widthComputed: calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description: The height of the small spinner-4 Loader.
kendo-loader-md-spinner-4-height$kendo-loader-md-spinner-4-widthcalc(var(--kendo-spacing-2, 0.5rem) * 4)Default: $kendo-loader-md-spinner-4-widthComputed: calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description: The height of the medium spinner-4 Loader.
kendo-loader-lg-spinner-4-height$kendo-loader-lg-spinner-4-widthcalc(var(--kendo-spacing-4, 1rem) * 4)Default: $kendo-loader-lg-spinner-4-widthComputed: calc(var(--kendo-spacing-4, 1rem) * 4)
Description: The height of the large spinner-4 Loader.
kendo-loader-container-panel-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the container panel.
kendo-loader-container-panel-border-stylesolidsolidDefault: solidComputed: solid
Description: The border style of the container panel.
kendo-loader-container-panel-border-color$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the container panel.
kendo-loader-container-panel-border-radiusk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem)
Description: The border radius of the container panel.
kendo-loader-container-panel-bg$kendo-color-white #ffffffDefault: $kendo-color-whiteComputed: #ffffff
Description: The background color of the container panel.
kendo-loader-sm-container-paddingk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The padding of the small Loader container.
kendo-loader-md-container-paddingk-spacing(5)var(--kendo-spacing-5, 1.25rem)Default: k-spacing(5)Computed: var(--kendo-spacing-5, 1.25rem)
Description: The padding of the medium Loader container.
kendo-loader-lg-container-paddingk-spacing(6)var(--kendo-spacing-6, 1.5rem)Default: k-spacing(6)Computed: var(--kendo-spacing-6, 1.5rem)
Description: The padding of the large Loader container.
kendo-loader-sm-container-gapk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The gap of the small Loader container.
kendo-loader-md-container-gapk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The gap of the medium Loader container.
kendo-loader-lg-container-gapk-spacing(3)var(--kendo-spacing-3, 0.75rem)Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem)
Description: The gap of the large Loader container.
kendo-loader-sm-container-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the small Loader container.
kendo-loader-md-container-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the medium Loader container.
kendo-loader-lg-container-font-sizevar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit)
Description: The font size of the large Loader container.
Feedback