Added in v1.1

Blazorise LoadingIndicator component

A wrapper component that adds a loading indicator to child content. Default spinner courtesy of icons8.com.

To use the LoadingIndicator component, install the Blazorise.LoadingIndicator package first.

Installation

NuGet

Install extension from NuGet.

dotnet add package Blazorise.LoadingIndicator

Imports

In your main _Imports.razor add:

@using Blazorise.LoadingIndicator

Static files

Include CSS link into your index.html or _Layout.cshtml / _Host.cshtml file, depending if you're using a Blazor WebAssembly or Blazor Server side project.

<link href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.css" rel="stylesheet" />

Basic example

The basic usage scenario for LoadingIndicator with default settings using a LoadingIndicator object reference.

<LoadingIndicator @ref="loadingIndicator">
    <LineChart TItem="double" Data="lineChartData" />
</LoadingIndicator>

<Button Clicked="UpdateChart" Color="Color.Primary">Update</Button>

@code 
{
    LoadingIndicator loadingIndicator;

    async Task UpdateChart()
    {
        await loadingIndicator.Show();

        await Task.Delay(3000); // Do work ...

        await loadingIndicator.Hide();
    }

    // sample data
    ChartData<double> lineChartData = new()
    {
        Labels = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun" },
        Datasets = new() { new LineChartDataset<double>()
        {
            Data = new List<double>() { 70, 90, 50, 60, 80, 100 },
        }}
    };
}

Two-way Binding

Having a more declarative approach to control the indicator is also supported. To make it work, you just need to bind a variable to the Visible parameter, and it will work.

<LoadingIndicator @bind-Visible="@visible">
    <LineChart TItem="double" Data="lineChartData" />
</LoadingIndicator>

<Button Clicked="UpdateChart" Color="Color.Primary">Update</Button>

@code
{
    bool visible;

    async Task UpdateChart()
    {
        visible = true;

        await Task.Delay( 3000 ); // Do work ...

        visible = false;
    }

    // sample data
    ChartData<double> lineChartData = new()
    {
        Labels = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun" },
        Datasets = new() { new LineChartDataset<double>()
        {
            Data = new List<double>() { 70, 90, 50, 60, 80, 100 },
        }}
    };
}

Status text

Display progress text by providing IndicatorTemplate. The template receives a LoadingIndicatorContext with Text and Progress updated via SetStatus.

<LoadingIndicator @ref="loadingIndicator" FullScreen>
    <ChildContent>
        <Button Clicked="ShowIndicator" Color="Color.Primary">Show indicator</Button>
    </ChildContent>
    <IndicatorTemplate>
        <Div Flex="Flex.Column.AlignItems.Center" Gap="Gap.Is2">
            <SpinKit Type="SpinKitType.Chase" Size="Size.ExtraLarge" Color="Color.Primary" />
            @if ( !string.IsNullOrWhiteSpace( context.Text ) )
            {
                <Span>@context.Text</Span>
            }
            @if ( context.Progress.HasValue )
            {
                <Span>@($"{context.Progress.Value}%")</Span>
            }
        </Div>
    </IndicatorTemplate>
</LoadingIndicator>

@code
{
    LoadingIndicator loadingIndicator;

    async Task ShowIndicator()
    {
        await loadingIndicator.SetStatus( text: "Loading files", progress: 30 );
        await loadingIndicator.Show();

        await Task.Delay( 1000 );

        await loadingIndicator.SetStatus( text: "Loading other data", progress: 60 );

        await Task.Delay( 1000 );

        await loadingIndicator.SetStatus( text: "Finalizing", progress: 90 );

        await Task.Delay( 1000 );

        await loadingIndicator.Hide();
    }
}

Application busy service

Use ApplicationLoadingIndicator to add a global application busy UI. Register ILoadingIndicatorService as a scoped service in your configuration. ApplicationLoadingIndicator automatically registers with ILoadingIndicatorService if one is registered or unless Service property is set directly. Use dependency injection to obtain a reference to the ILoadingIndicatorService to control ApplicationLoadingIndicator. The application busy UI comes with an awesome Blazorise logo spinner, which is recommended, but if you prefer the default spinner set IndicatorTemplate to null.

Add ILoadingIndicatorService as a scoped service.

services.AddLoadingIndicator();

Add ApplicationLoadingIndicator to your App.razor file.

<Router AppAssembly="typeof(App).Assembly">
    <Found>...</Found>
    <NotFound>...</NotFound>
</Router>

<ApplicationLoadingIndicator />

Inject ILoadingIndicatorService into your component where you want to trigger the application busy UI from.

@inject ILoadingIndicatorService ApplicationLoadingIndicatorService

@code 
{
    async Task DoWork()
    {
        await ApplicationLoadingIndicatorService.Show();

        // do work ...

        await ApplicationLoadingIndicatorService.Hide();
    }
}

Cascading Usage

You can also use the wrapper as a cascading parameter.

To implement a global application busy UI using cascading parameter add the wrapper to your main layout.

<LoadingIndicator FullScreen>
    @Body
</LoadingIndicator>

Declare a CascadingParameter of type LoadingIndicator in your component.

<Button Clicked="DoWork" />

@code
{
    [CascadingParameter]
    LoadingIndicator loadingIndicator;

    async Task DoWork()
    {
        await loadingIndicator.Show();

        // do work ...

        await loadingIndicator.Hide();
    }
}

Disabling input controls

While the busy screen prevents click events from reaching child content it has no effect on keyboard input. You may want to disable your input controls such as textboxes and buttons while your component is busy.

Using the Visible property directly.

<LoadingIndicator @ref="loadingIndicator">
    <Button Disabled="loadingIndicator.Visible" Clicked="DoWork"/>
</LoadingIndicator>

@code
{
    LoadingIndicator loadingIndicator;

    async Task DoWork()
    {
        if ( !loadingIndicator.Visible )
        {
            await loadingIndicator.Show();

            // do work...

            await loadingIndicator.Hide();
        }
    }
}

Disabling your controls using LoadingIndicatorService.

@inject ILoadingIndicatorService ApplicationLoadingIndicatorService

<Button Disabled="ApplicationLoadingIndicatorService.Visible" />

Disable the entire input form using <fieldset>

@inject ILoadingIndicatorService ApplicationLoadingIndicatorService

<form action="/action_page.php">
    <fieldset disabled="ApplicationLoadingIndicatorService.Visible"> 
        <label for="fname">Message:</label>
        <input type="text" id="message" name="message">
        <input type="submit" value="Send">
     </fieldset>
</form>

Using animation

Loading indicator can animate its visibility state by fading into view. This is on by default for ApplicationLoadingIndicator. You can also use the Animate component to add a visual effect.

<LoadingIndicator @ref="loadingIndicator" FullScreen FadeIn>
    <ChildContent>
        <Button Clicked="ShowIndicator" Color="Color.Primary">Show indicator</Button>
    </ChildContent>
    <IndicatorTemplate>
        <Animate Animation="Animations.FadeDownRight" Auto Duration="TimeSpan.FromMilliseconds( 700 )">
            <Div>
                <SpinKit Type="SpinKitType.Wave" Size="Size.ExtraLarge" />
            </Div>
        </Animate>
    </IndicatorTemplate>
</LoadingIndicator>

@code
{
    LoadingIndicator loadingIndicator;

    async Task ShowIndicator()
    {
        await loadingIndicator.Show();

        await Task.Delay( 3000 ); // Do work ...

        await loadingIndicator.Hide();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<LoadingIndicator />