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>