New to Telerik UI for Blazor? Download free 30-day trial

Loading Animation

The loading animation indicates a data operation that requires more than 600ms to complete. The indicator appears as a loading sign over the Blazor Data Grid. The loading animation improves user experience with a visual hint that the requested action is still executing. The feature can prevent repetitive user actions.

The data operations that trigger the loading animation include:

The Grid will not display a loading animation during its initial rendering. The component cannot know when or even if data will be provided to it. Initial automatic loading sign can either show indefinitely, or it could prevent the user from altering any saved Grid state (such as changing filters). If you want a loading animation on the initial load, you can use a LoaderContainer component. See the Grid Loading Animation Live Demo.

Grid Loading Animation

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<p><label><TelerikCheckBox @bind-Value="@ShowLoading" /> Show Loading</label></p>

<TelerikGrid TItem="@GridModel"
        <GridColumn Field="Text" />

@code {
    List<GridModel> AllData { get; set; }
    bool ShowLoading { get; set; } = true;

    async Task GetData(GridReadEventArgs args)
        await Task.Delay(2000);
        DataSourceResult result = AllData.ToDataSourceResult(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;

    protected override void OnInitialized()
        AllData = Enumerable.Range(1, 30).Select(x => new GridModel
            Id = x,
            Text = "Text " + x


    public class GridModel
        public int Id { get; set; }
        public string Text { get; set; }

See Also

In this article