themeColorString
(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