Appearance Settings

The LoaderContainer component provides the several parameters that control various aspects of its appearance - indicator size, color and position, overlay color:

• LoaderContainer Specific
  • OverlayThemeColor
  • LoaderPosition
• Shared with the Loader Component
  • Type
  • Size
  • ThemeColor

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
• Size
• ThemeColor

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>

See Also

• Live Demo: LoaderContainer
• Live Demo: LoaderContainer Customization