themeColorString(default: undefined)

Sets a value controlling the theme color of the component. When undefined (the default), the theme controls the color. Can also be set to the following string values:

  • primary: apply coloring based on primary theme color.
  • secondary: apply coloring based on secondary theme color.
  • tertiary: apply coloring based on tertiary theme color.
  • info: apply coloring based on info theme color.
  • success: apply coloring based on success theme color.
  • warning: apply coloring based on warning theme color.
  • error: apply coloring based on error theme color.
  • dark: apply coloring based on dark theme color.
  • light: apply coloring based on light theme color.
  • inverse: depending on the luminance of the theme, light or dark, inverted will be dark or light.

Example

<span id="loader-primary"></span>
<span id="loader-secondary"></span>
<span id="loader-tertiary"></span>
<span id="loader-info"></span>
<span id="loader-success"></span>
<span id="loader-warning"></span>
<span id="loader-error"></span>
<span id="loader-dark"></span>
<span id="loader-light"></span>
<span id="loader-inverse"></span>

<script>
    $('#loader-primary').kendoLoader({ themeColor: 'primary' });
    $('#loader-secondary').kendoLoader({ themeColor: 'secondary' });
    $('#loader-tertiary').kendoLoader({ themeColor: 'tertiary' });
    $('#loader-info').kendoLoader({ themeColor: 'info' });
    $('#loader-success').kendoLoader({ themeColor: 'success' });
    $('#loader-warning').kendoLoader({ themeColor: 'warning' });
    $('#loader-error').kendoLoader({ themeColor: 'error' });
    $('#loader-dark').kendoLoader({ themeColor: 'dark' });
    $('#loader-light').kendoLoader({ themeColor: 'light' });
    $('#loader-inverse').kendoLoader({ themeColor: 'inverse' });
</script>
In this article
themeColor
Not finding the help you need?
Contact Support