Blazor Loader Overview

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

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.

The 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.

Download Free Trial

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.

Parameter	Type and Default Value	Description
Class	string	Renders a custom CSS class to the <div class="k-loader"> element. Use it to override theme styles.
Size	string ("md")	Sets the size of the animated graphic. For convenience, use the members of the static class ThemeConstants.Loader.Size.
ThemeColor	string ("primary")	Sets the color of the animated graphic. For convenience, use the members of the static class ThemeConstants.Loader.ThemeColor.
Type	LoaderType enum (Pulsing)	Defines the loading animation shape.
Visible	bool (true)	Sets if the Loader is rendered on the page.

Next Steps

• Explore the Loader Appearance Settings

See Also

• Live Demo: Loader
• Loader API Reference