Appearance Settings
The LoaderContainer component provides the several parameters that control various aspects of its appearance - indicator size, color and position, overlay color:
You can see the appearance settings in action in the LoaderContainer Customization Live Demo.
LoaderContainer Specific
OverlayThemeColor
The OverlayThemeColor
parameter controls the color of the overlay for the LoaderContainer. It takes a string from the options below. If you provide a String.Empty
, null
or invalid option (not listed below) the color of the overlay will be transparent
.
-
dark
- the default background color - black with opacity. -
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">
<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 loading indicator against the Text
parameter. There are three predefined options which are members of the LoaderPosition
enum:
-
Top
- the default position - 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">
<TelerikLoaderContainer LoaderPosition="@LoaderPosition.Start"></TelerikLoaderContainer>
</div>
<div class="col-4" style="position: relative">
<TelerikLoaderContainer LoaderPosition="@LoaderPosition.End"></TelerikLoaderContainer>
</div>
</div>
Shared with the Loader Component
The LoaderContainer
utilizes the Loader component internally to provide the animated indicator. Because of that, the LoaderContainer
and the Loader
share appearance settings which you can use to style the loading indicator.
Setup the appearance settings for the LoaderContainer related to the loader animation
@*Customize the appearance of the LoaderContainer using the exposed parameters*@
<TelerikLoaderContainer LoaderType="@LoaderType.InfiniteSpinner"
LoaderPosition="@LoaderPosition.Start"
Size="@LoaderSize.Small"
ThemeColor="info">
</TelerikLoaderContainer>
The following parameters are shared with the Loader component and the examples below showcase their behavior in isolation:
Type
The Type
parameter controls the general shape of the animation. It takes a member of the Telerik.Blazor.Components.LoaderType
enum:
Pulsing
InfiniteSpinner
ConvergingSpinner
You can see them in action in the Loader Overview Live Demo.
Loader Types
@foreach (LoaderType type in Enum.GetValues(typeof(Telerik.Blazor.Components.LoaderType)))
{
<div style="float: left; margin: 20px;">
@type
<br /><br />
<TelerikLoader Type="@type"></TelerikLoader>
</div>
}
Size
There are three predefined sizes for the loader that you can set through its Size
parameter that takes a member of the Telerik.Blazor.Components.LoaderSize
enum:
Small
-
Medium
- the default value Large
You can see them in action in the Loader Overview Live Demo.
Loader Size
@foreach (LoaderSize size in Enum.GetValues(typeof(Telerik.Blazor.Components.LoaderSize)))
{
<div style="float: left; margin: 20px;">
@size
<br /><br />
<TelerikLoader Size="@size"></TelerikLoader>
</div>
}
ThemeColor
The color of the animated loading icon is controlled through the ThemeColor
parameter. You can set it to a member of the Telerik.Blazor.ThemeColor
class:
Primary
Secondary
Tertiary
Success
Info
Warning
Error
Dark
Light
Inverse
These predefined options match the main Telerik Theme and you can see that in action in the Appearance Live Demo.
Built-in Theme Colors
@{
var fields = typeof(Telerik.Blazor.ThemeColors)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static |
System.Reflection.BindingFlags.FlattenHierarchy)
.Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList();
foreach (var f in fields)
{
string color = f.GetValue(null).ToString();
<div style="float: left; margin: 20px;">
@color
<br /><br />
<TelerikLoader ThemeColor="@color"></TelerikLoader>
</div>
}
}
The ThemeColor
parameter renders as the k-loader-<ThemeColor>
CSS class on the wrapping element and you can set it to a custom value to cascade through and set the color to a setting of your own without customizing the entire theme.
Custom loader color without customizing the Telerik Theme
<style>
.k-loader-custom-color .k-loader-segment::after {
background-color: cyan;
}
</style>
<TelerikLoader ThemeColor="custom-color"></TelerikLoader>