Blazorise LoadingIndicator component

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

Installation

NuGet

Install extension from NuGet.
Install-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 Example

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 },
        }}
    };
}

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();
    }
}

Using as cascading parameter

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="100px" />
            </Div>
        </Animate>
    </IndicatorTemplate>
</LoadingIndicator>
@code
{
    LoadingIndicator loadingIndicator;

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

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

        await loadingIndicator.Hide();
    }
}

Attributes

Name Description Type Default
FadeIn Fade in indicator screen into view. Default true for ApplicationLoadingIndicator. bool false
FadeInDuration Fade in animation duration TimeSpan 700ms
FullScreen Show indicator in full screen mode. Default true for ApplicationLoadingIndicator. bool false
IndicatorBackground Set overlay background color. Use alpha channel for opacity. Background rgba(255, 255, 255, 0.7)
IndicatorHorizontalPlacement Indicator horizontal placement. LoadingIndicatorPlacement Middle
IndicatorPadding Indicator div padding. FluentPadding null
IndicatorTemplate Loading indicator template. RenderFragment null
IndicatorVerticalPlacement Indicator vertical placement. LoadingIndicatorPlacement Middle
Initializing Current initializing state. bool false
InitializingTemplate Initializing state template. Use this to display placeholder UI while your component is initializing (e.g. loading data from server). RenderFragment null
Inline Used when wrapping inline content such as input controls. bool false
SpinnerBackground Set spinner background color. Background #c0c0c0
SpinnerColor Set spinner color. Color #000000
SpinnerHeight Set spinner height. string 64px
SpinnerWidth Set spinner width. string null
Visible Current loading indicator state. bool false
ZIndex Manually set screen z-index. int? null