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

Customizing Loader

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
Description
The border radius of the Loader segment.
$kendo-loader-sm-segment-sizeStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The size of the small Loader segment.
$kendo-loader-md-segment-sizeStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The size of the medium Loader segment.
$kendo-loader-lg-segment-sizeStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The size of the large Loader segment.
$kendo-loader-sm-padding-xCalculationcalc( #{$kendo-loader-sm-segment-size} / 2 )calc(var(--kendo-spacing-1, 0.25rem) / 2)
Description
The horizontal padding of the small Loader.
$kendo-loader-md-padding-xCalculationcalc( #{$kendo-loader-md-segment-size} / 2 )calc(var(--kendo-spacing-2, 0.5rem) / 2)
Description
The horizontal padding of the medium Loader.
$kendo-loader-lg-padding-xCalculationcalc( #{$kendo-loader-lg-segment-size} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the large Loader.
$kendo-loader-sm-padding-yCalculationcalc( #{$kendo-loader-sm-segment-size} / 2 )calc(var(--kendo-spacing-1, 0.25rem) / 2)
Description
The vertical padding of the small Loader.
$kendo-loader-md-padding-yCalculationcalc( #{$kendo-loader-md-segment-size} / 2 )calc(var(--kendo-spacing-2, 0.5rem) / 2)
Description
The vertical padding of the medium Loader.
$kendo-loader-lg-padding-yCalculationcalc( #{$kendo-loader-lg-segment-size} /2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical padding of the large Loader.
$kendo-loader-equilateral-heightNumber.86600.866
Description
The equilateral height of the Loader.
$kendo-loader-sm-spinner-3-widthCalculationcalc( #{$kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-widthCalculationcalc( #{$kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-widthCalculationcalc( #{$kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)
Description
The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-heightCalculationcalc( #{$kendo-loader-sm-spinner-3-width} * #{$kendo-loader-equilateral-height} )calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.866)
Description
The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-heightCalculationcalc( #{$kendo-loader-md-spinner-3-width} * #{$kendo-loader-equilateral-height} )calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.866)
Description
The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-heightCalculationcalc( #{$kendo-loader-lg-spinner-3-width} * #{$kendo-loader-equilateral-height} )calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.866)
Description
The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-widthCalculationcalc( #{$kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-widthCalculationcalc( #{$kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-widthCalculationcalc( #{$kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)
Description
The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-heightCalculation$kendo-loader-sm-spinner-4-widthcalc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-heightCalculation$kendo-loader-md-spinner-4-widthcalc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-heightCalculation$kendo-loader-lg-spinner-4-widthcalc(var(--kendo-spacing-4, 1rem) * 4)
Description
The height of the large spinner-4 Loader.
$kendo-loader-container-panel-border-widthNumber1px1px
Description
The border width of the container panel.
$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border style of the container panel.
$kendo-loader-container-panel-border-colorStringvar( --kendo-component-border, initial )var(--kendo-component-border, initial)
Description
The border color of the container panel.
$kendo-loader-container-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the container panel.
$kendo-loader-container-panel-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the container panel.
$kendo-loader-sm-container-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the small Loader container.
$kendo-loader-md-container-padding-xStringk-spacing(5)var(--kendo-spacing-5, 1.25rem)
Description
The horizontal padding of the medium Loader container.
$kendo-loader-lg-container-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the large Loader container.
$kendo-loader-sm-container-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the small Loader container.
$kendo-loader-md-container-padding-yStringk-spacing(5)var(--kendo-spacing-5, 1.25rem)
Description
The vertical padding of the medium Loader container.
$kendo-loader-lg-container-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the large Loader container.
$kendo-loader-sm-container-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The gap of the small Loader container.
$kendo-loader-md-container-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The gap of the medium Loader container.
$kendo-loader-lg-container-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap of the large Loader container.
$kendo-loader-sm-container-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the small Loader container.
$kendo-loader-md-container-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Loader container.
$kendo-loader-lg-container-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the large Loader container.
$kendo-loader-brand-colorsMap( primary: primary, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, error: error, success: success, warning: warning, info: info )
  • primary: primary
  • secondary: secondary
  • tertiary: tertiary
  • error: error
  • success: success
  • warning: warning
  • info: info
Description
The theme variations for the Loader.
$kendo-loader-theme-colorsMap()
  • primary: "bg":"var(--kendo-color-primary, #0078d4)","text":null,"border":null
  • secondary: "bg":"var(--kendo-color-secondary, #979593)","text":null,"border":null
  • tertiary: "bg":"var(--kendo-color-tertiary, #2b88d8)","text":null,"border":null
  • error: "bg":"var(--kendo-color-error, #c2666b)","text":null,"border":null
  • success: "bg":"var(--kendo-color-success, #55a554)","text":null,"border":null
  • warning: "bg":"var(--kendo-color-warning, #ffc80a)","text":null,"border":null
  • info: "bg":"var(--kendo-color-info, #0a7eff)","text":null,"border":null
  • dark: "bg":"var(--kendo-color-dark, #323130)","text":null,"border":null
  • light: "bg":"var(--kendo-color-light, #d2d0ce)","text":null,"border":null
Description
The theme colors map for the Loader variations.

In this article

Not finding the help you need?