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

API

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`