Skip to main content

Blazor Preload

Indicate the loading state of a page with Blazor Bootstrap preload component.

Things to know when using the Preload component:

  • Add the Preload component to your current page or your layout page.
  • Inject PreloadService
  • Call PreloadService.Show() before you make any call to the API.
  • Call PreloadService.Hide() after you get the response from the API.
Blazor Bootstrap: Blazor Preload Component - Default

Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.1.0
LoadingTextstring?nullGets or sets the loading text.1.10.4

Preload Service

Methods

NameReturn TypeDescriptionAdded Version
Show(SpinnerColor spinnerColor = SpinnerColor.Light)voidShows the preload.1.1.0
Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null)voidShows the preload.1.10.4
Hide()voidHides the preload.1.1.0

Global preload service for the application

  1. Add the Preload component in MainLayout.razor page as shown below.
@using BlazorBootstrap
.
.

... MainLayout.razor code goes here ...

.
.
<Preload LoadingText="Loading..." />
  1. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API call, respectively, as shown below.
@code {

[Inject] protected PreloadService PreloadService { get; set; }

private void GetEmployees()
{
try
{
PreloadService.Show();

// call the service/api to get the employees
}
catch
{
// handle exception
}
finally
{
PreloadService.Hide();
}
}
}

See Preload demo here.

Change loading text

Blazor Bootstrap: Blazor Preload Component - Change loading text
<Button Color="ButtonColor.Primary" @onclick="ShowLoadingDataAsync">Show Loading data...</Button>
<Button Color="ButtonColor.Dark" @onclick="ShowSavingDataAsync">Show Saving data...</Button>
@code {
[Inject] protected PreloadService PreloadService { get; set; }

private async Task ShowLoadingDataAsync()
{
PreloadService.Show(SpinnerColor.Light, "Loading data...");
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}

private async Task ShowSavingDataAsync()
{
PreloadService.Show(SpinnerColor.Light, "Saving data...");
await Task.Delay(3000); // call the service/api
PreloadService.Hide();
}
}

See Preload demo here.

Change spinner color

Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section.

Blazor Bootstrap: Blazor Preload Component - Change spinner color
<Button Color="ButtonColor.Primary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Primary)">Primary Spinner</Button>
<Button Color="ButtonColor.Secondary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Secondary)">Secondary Spinner</Button>
<Button Color="ButtonColor.Success" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Success)">Success Spinner</Button>
<Button Color="ButtonColor.Danger" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Danger)">Danger Spinner</Button>
<Button Color="ButtonColor.Warning" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Warning)">Warning Spinner</Button>
<Button Color="ButtonColor.Info" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Info)">Info Spinner</Button>
<Button Color="ButtonColor.Light" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Light)">Light Spinner</Button>
<Button Color="ButtonColor.Dark" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Dark)">Dark Spinner</Button>
@code {
[Inject] protected PreloadService PreloadService { get; set; }

private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)
{
PreloadService.Show(spinnerColor);

await Task.Delay(3000); // call the service/api

PreloadService.Hide();
}
}

See Preload demo here.