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

Appearance Settings

The loader component provides the following parameters that control its appearance:

You can use all three together to get the desired appearance. This article will explain their effect one by one.


The Type parameter controls the loading animation shape. It takes a member of the Telerik.Blazor.Components.LoaderType enum:

  • Pulsing (default)
  • InfiniteSpinner
  • ConvergingSpinner

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;">
        <br /><br />
        <TelerikLoader Type="@type"></TelerikLoader>


The Size parameter accepts a string and there are three predefined sizes for the Loader. You can use the predefined properties in the Telerik.Blazor.ThemeConstants.Loader.Size static class:

  • Small (equals "sm")
  • Medium (equals "md") - default
  • Large (equals "lg")

See them in action in the Loader Overview live demo.

Loader Size

loader size

@foreach (string size in LoaderSizes)
    <div style="float: left; margin: 20px;">
        <br /><br />
        <TelerikLoader Size="@size"></TelerikLoader>

@code {
    List<string> LoaderSizes { get; set; } = new List<string>() {


The ThemeColor parameter sets the color of the animated loading indicator. You can set it to a string property of the static class ThemeConstants.Loader.ThemeColor:

  • 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 Loader Appearance live demo.

Built-in Theme Colors

Loader Theme Colors

    var fields = typeof(ThemeConstants.Loader.ThemeColor)
                    .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static |
                    .Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList();
    foreach (var f in fields)
        string color = f.GetValue(null).ToString();
        <div style="display: inline-block; margin: 20px;">
            <br /><br />
            <TelerikLoader ThemeColor="@color"></TelerikLoader>

Custom Loader Colors

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

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

See Also

In this article