Appearance Settings
This article explains how to control the LoaderContainer look and feel.
The LoaderContainer component provides multiple parameters that control its appearance:
The LoaderContainer uses a nested internal Loader component to show the animated indicator. The LoaderContainer exposes parameters, which directly control the Loader's apparance:
You can see the appearance settings in action in the LoaderContainer Appearance live demo.
OverlayThemeColor
The OverlayThemeColor parameter sets the color of the LoaderContainer's semi-transparent overlay. It takes a string from the options below. To make the overlay fully transparent, set the value to String.Empty or null.
-
"dark"(default) - black semi-transparent background -
"light"- white background color with opacity
Change the OverlayThemeColor
@*This example shows the difference between the light and dark overlay theme colors*@
<div class="row">
<div class="col-4" style="position: relative; height: 200px">
<TelerikLoaderContainer OverlayThemeColor="dark"></TelerikLoaderContainer>
<div>
This is some text to showcase the dark overlay theme color
</div>
</div>
<div class="col-4" style="position: relative; height: 200px">
<TelerikLoaderContainer OverlayThemeColor="light"></TelerikLoaderContainer>
<div>
This is some text to showcase the light overlay theme color
</div>
</div>
</div>
LoaderPosition
The LoaderPosition parameter controls the position of the animated loading indicator in relation to the loading Text. There are three predefined options, which are members of the LoaderPosition enum:
-
Top(default) - the loading animation is above the text -
Start- the loading animation is to the left of the text -
End- the loading animation is to the right of the text
The position of the Loader indicator
@*The different positions of the loader indicator based on the predefault values.*@
<div class="row">
<div class="col-4" style="position: relative; height: 200px">
<TelerikLoaderContainer LoaderPosition="@LoaderPosition.Top"></TelerikLoaderContainer>
</div>
<div class="col-4" style="position: relative; height: 200px">
<TelerikLoaderContainer LoaderPosition="@LoaderPosition.Start"></TelerikLoaderContainer>
</div>
<div class="col-4" style="position: relative; height: 200px">
<TelerikLoaderContainer LoaderPosition="@LoaderPosition.End"></TelerikLoaderContainer>
</div>
</div>
LoaderType
The LoaderType parameter of the LoaderContainer will affect the shape of animated loading indicator. The parameter works only when there is no <Template>.
See the Loader Type documentation for the possible values and how the component looks.
Setting TelerikLoaderContainer LoaderType
<TelerikLoaderContainer LoaderType="@LoaderType.InfiniteSpinner" />
Size
The Size parameter of the LoaderContainer will affect the dimensions of animated loading indicator. The parameter works only when there is no <Template>.
See Loader Size for a list of possible values and how to set them more easily.
Setting TelerikLoaderContainer Size
<TelerikLoaderContainer Size="@ThemeConstants.Loader.Size.Large" />
ThemeColor
The ThemeColor parameter of the LoaderContainer will affect the text color and the loading indicator color. The parameter works only when there is no <Template>.
See Loader ThemeColor for a list of possible values and how the component looks.
Setting TelerikLoaderContainer ThemeColor
<TelerikLoaderContainer ThemeColor="@ThemeConstants.Loader.ThemeColor.Info" />
Custom LoaderContainer Colors
The following example shows how to override the CSS styles in the theme and apply custom colors to all LoaderContainer elements.
Custom LoaderContainer colors
<TelerikLoaderContainer Class="custom-loading-colors" />
<style>
/* overlay */
.custom-loading-colors .k-loader-container-overlay {
background-color: yellow;
}
/* panel */
.custom-loading-colors .k-loader-container-panel {
background-color: pink;
}
/* animation */
.custom-loading-colors .k-loader {
color: blue;
}
/* text */
.custom-loading-colors .k-loader-container-label {
color: purple !important;
font-weight: bold;
}
</style>