New to Telerik UI for Blazor? Download free 30-day trial

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

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

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

Loader 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

Custom loader color

<style>
    .k-loader-custom-color .k-loader-segment::after {
        background-color: cyan;
    }
</style>
<TelerikLoader ThemeColor="custom-color"></TelerikLoader>

See Also

In this article
Not finding the help you need? Improve this article