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.
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
- Use the
<TelerikLoaderContainer>
tag. - Set the
Visible
parameter to abool
property or expression. - (optional) Set the
Text
parameter to astring
.
<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.
<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.