themeColor String (default: 'primary')

Specifies the color of the component. Valid options are

  • 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: always 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