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.

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

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

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="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

Parameters

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this LoadingIndicator.	`RenderFragment`	`null`
`FadeIn`	Fade in indicator into view.	`bool`	`false`
`FadeInDuration`	Fade in duration in milliseconds. Default is 700 ms.	`TimeSpan`	`TimeSpan.FromMilliseconds( 700 )`
`FullScreen`	Show busy indicator full screen.	`bool`	`false`
`IndicatorBackground`	Busy screen color.	`Background`	`"rgba(255, 255, 255, 0.7)"`
`IndicatorHorizontalPlacement`	Indicator horizontal position. Possible values:`Top`, `Bottom`, `Start`, `End`, `Middle`	`LoadingIndicatorPlacement`	`LoadingIndicatorPlacement.Middle`
`IndicatorPadding`	Indicator div padding.	`IFluentSpacing`	`null`
`IndicatorTemplate`	Busy indicator template that receives a LoadingIndicatorContext derived from the current status.	`RenderFragment<LoadingIndicatorContext>`	`null`
`IndicatorVerticalPlacement`	Indicator vertical position. Possible values:`Top`, `Bottom`, `Start`, `End`, `Middle`	`LoadingIndicatorPlacement`	`LoadingIndicatorPlacement.Middle`
`Initializing`	Indicates whether component should display initializing or actual content.	`bool`	`false`
`InitializingTemplate`	Loading state template.	`RenderFragment`	`null`
`Inline`	Wrap inline content.	`bool`	`false`
`Service`	Service used to control this instance.	`ILoadingIndicatorService`	`null`
`SpinnerBackground`	Spinner background color.	`Background`	`"#c0c0c0"`
`SpinnerColor`	Defines the spinner color in a HEX format.	`Color`	`"#000000"`
`SpinnerHeight`	Defines the spinner HTML height, eg. "64px".	`string`	`"64px"`
`SpinnerWidth`	Defines the spinner HTML width, eg. "64px".	`string`
`Visible`	Indicates whether the loading indicator is visible.	`bool`	`false`
`ZIndex`	Overlay screen z-index.	`int?`	`null`

Events

Event	Description	Type
`InitializingChanged`	Occurs when Initializing state has changed.	`EventCallback<bool>`
`VisibleChanged`	Occurs when Visible state has changed.	`EventCallback<bool>`

Methods

Method	Description	Return	Parameters
`Show`	Shows the loading indicator overlay.	`Task`
`Hide`	Hides the loading indicator overlay.	`Task`
`SetInitializing`	Sets the Initializing state and notifies subscribers.	`Task`	`bool value`
`SetStatus`	Updates the status payload for this indicator.	`Task`	`string text, int? progress`
`SetStatus`	Updates the status payload for this indicator.	`Task`	`LoadingIndicatorStatus value`