Blazor Loader Overview

This article provides information about the Blazor Loader component and its core features.

ninja-iconThe Loader component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The Loader component displays an animated loading indicator, which shows users that the app is working on something in the background. The component provides a variety of predefined animated graphics, colors and sizes.

Comparison with the LoaderContainer

The Loader is placed inside another component or HTML element. Typically, it occupies a relatively small area. On the other hand, the LoaderContainer component can cover a bigger part of the page or the whole viewport with a semi-transparent overlay and a loading animation.

Creating Blazor Loader

  1. Use the <TelerikLoader> tag.
  2. Set the Visible parameter to a bool property.
  3. (optional) Set the Type parameter to a member of the LoaderType enum.
  4. (optional) Set the Size parameter to a property of the static class ThemeConstants.Loader.Size.
  5. (optional) Set the ThemeColor parameter to a property of the static class ThemeConstants.Loader.ThemeColor.

Blazor Loader with non-default appearance settings

<TelerikButton OnClick="@( _ => LoaderVisible = !LoaderVisible )">Toggle Loader</TelerikButton>

<TelerikLoader Visible="@LoaderVisible"
               Size="@ThemeConstants.Loader.Size.Large"
               ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary"
               Type="@LoaderType.ConvergingSpinner" />

<p>Default settings (Medium size, Primary color, Pulsing type):</p>

<TelerikLoader Visible="@LoaderVisible" />

@code {
    bool LoaderVisible { get; set; } = true;
}

Do not show or hide the Loader in a method, which is blocking the UI thread with synchronous operations. If this happens, the Loader may not appear when expected. A possible workaround is to use await Task.Delay(...) to give Blazor time to refresh the UI.

Appearance

The Blazor Loader component provides appearance settings for size, color and loading animation type.

Using In Other Components

It is possible to place the Loader component inside another component for better user experience. Here is an example that integrates the Loader inside a Button.

Loader Parameters

The following table lists the Loader parameters. Also check the Loader API Reference.

ParameterType and Default ValueDescription
ClassstringRenders a custom CSS class to the <div class="k-loader"> element. Use it to override theme styles.
Sizestring
("md")
Sets the size of the animated graphic. For convenience, use the members of the static class ThemeConstants.Loader.Size.
ThemeColorstring
("primary")
Sets the color of the animated graphic. For convenience, use the members of the static class ThemeConstants.Loader.ThemeColor.
TypeLoaderType enum
(Pulsing)
Defines the loading animation shape.
Visiblebool
(true)
Sets if the Loader is rendered on the page.

Next Steps

See Also