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.

Telerik UI for Blazor Ninja image

The Loader component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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 programmatically in a method, which is blocking the UI thread. If this happens, the Loader may not appear when expected.

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

See Also

In this article