Blazor LoaderContainer Overview

The Blazor LoaderContainer provides an animated indicator, a panel, and an overlay that can be used when the application is performing a time-consuming background operation, for example loading data.

Telerik UI for Blazor Ninja image

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

Comparison with the Loader

The LoaderContainer is designed to cover a whole component, HTML element, or the whole page. On the other hand, the Loader component is more suitable for showing a loading indicator in a smaller area of the page and without an overlay.

Creating LoaderContainer

  1. Use the <TelerikLoaderContainer> tag.
  2. Set the Visible parameter to a bool property or expression.
  3. (optional) Set the Text parameter to a string.

Basic LoaderContainer

<p> Data Count: @Data?.Count </p>

<TelerikLoaderContainer Visible="@( Data == null )" Text="Please wait..." />

@code {
    List<string> Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(3000); // simulate slow loading of data

        Data = Enumerable.Range(1, 10).Select(x => $"data item {x}").ToList();
    }
}

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

By default, the Loader Container will fill up the browser viewport. To overlay only a specific element, see the Fill a Parent Container section below.

Appearance

The Blazor LoaderContainer provides various settings for its visual appearance:

  • overlay color
  • graphic and text position
  • loading animation type
  • size
  • text and graphic color

Templates

The LoaderContainer can display different nested content. Read more in the LoaderContainer Template article.

Fill a Parent Container

The Blazor LoaderContainer can expand to fill only a specific parent container. To restrict the LoaderContainer within the parent's boundaries, set a position: relative CSS style to the parent element.

Use the LoaderContainer to fill a parent element

<div style="position: relative; width: 600px; height: 400px;">
    <TelerikLoaderContainer />
</div>

LoaderContainer Parameters

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

Parameter Type and Default Value Description
Class string Renders a custom CSS class to the <div class="k-loader-container"> element. Use it to override theme styles. See an example at Custom LoaderContainer Colors.
OverlayThemeColor string
("dark")
Sets the color of the semi-transparent overlay. Use "light" or "dark".
Size string
("md")
Sets the size of the animated graphic. For convenience, use the members of the static class ThemeConstants.Loader.Size.
Text string
("Loading...")
Sets the text below the loading animation. Set to null or String.Empty to remove the text and its containing HTML element.
ThemeColor string
("primary")
Sets the color of the animated graphic and text. For convenience, use the members of the static class ThemeConstants.Loader.ThemeColor.
LoaderPosition LoaderPosition enum
(Top)
Defines the loading animation position in relation to the loading text.
LoaderType LoaderType enum
(Pulsing)
Defines the loading animation shape.
Visible bool
(true)
Controls if the LoaderContainer is rendered on the page.

Examples

Block All Content

By default, the Loader Container fills up the browser viewport, because this is the only certain size it can use - the application layout can change dimensions and where the scrollbars appear and there isn't a way for the component to know that and cater for all possible layouts.

So, if you want to make the loader container block all content on the app while it is shown, you must ensure the total app size fits the viewport and scrollbars appear inside it on an element that you can define.

Since the exact CSS rules and elements will vary depending on the layout, you need to examine the rendering in order to define them.

You can find one example in the following sample project: Disable All Content with Telerik Loader

Remove the Panel from the LoaderContainer

The panel is the white rectangular area that surrounds the animated loader indicator and the Text. Its purpose is to increase contrast and improve readability. To remove the white rectangle, use custom CSS code:

@* LoaderContainer with transparent panel *@

<TelerikLoaderContainer Class="no-panel"
                        ThemeColor="@ThemeConstants.Loader.ThemeColor.Dark" />

<style>
    .no-panel .k-loader-container-panel {
        background-color: transparent;
        border-width: 0;
    }
</style>

The panel is not rendered when using a LoaderContainer Template.

Next Steps

See Also

In this article