Customization in Blazor Spinner
27 Aug 20266 minutes to read
The Blazor Spinner component can be customized when initializing it or after it is rendered.
Customize when initializing the Blazor Spinner component
Provided support to change the default Blazor Spinner appearance when initializing Blazor Spinner component using the following properties.
CssClass
Add a customized CSS class name to the Blazor Spinner root element to customize the Blazor Spinner component’s UI styles. The following example shows how to initialize a Blazor Spinner with a custom class name in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" CssClass="e-customClass">
</SfSpinner>
</div>
</div>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
}
<style>
.e-spinner-pane.e-customClass .e-spinner-inner .e-spin-material {
stroke: #808080;
}
</style>
Modal Spinner
A modal Blazor Spinner can be initialized by adding the class e-spin-overlay to the CssClass property of the Blazor Spinner.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" CssClass="e-spin-overlay" />
</div>
<style>
#container {
position: relative;
height: 550px;
}
</style>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(10000);
this.VisibleProperty = false;
}
}
Label
Add a customized label text at the bottom of the Blazor Spinner component. The label is rendered beneath the spinner indicator.
The following example shows how to set the Label on the Spinner in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" Label="Loading....">
</SfSpinner>
</div>
</div>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
}
Type
By default, the Type is None where the Blazor Spinner is loaded based on the theme used in the application. The type can also be customized and shown on Blazor Spinner using the Type property. The available types are:
- None
- Material
- Fabric
- Bootstrap
- HighContrast
- Bootstrap4
The following example shows how to use the Type property when initializing the Spinner in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" Type="@SpinnerType.Bootstrap">
</SfSpinner>
</div>
</div>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
}
Size
By default, the Spinner size is 30px. The size of the Spinner can be changed based on the application using the Size property.
The following example shows how to use the Size property when initializing the Spinner in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" Size="50">
</SfSpinner>
</div>
</div>
@code{
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
}
Customize after creating the Blazor Spinner component
The Blazor Spinner component can be customized dynamically after it has been initialized by using the following properties:
- Type
- CssClass
Type
The type of the Blazor Spinner can be changed dynamically using the Type property.
The following example shows how to use the Type property after creating the Spinner in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<SfButton @onclick="@ChangeType">Change Type</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" Type="@SpinnerType">
</SfSpinner>
</div>
</div>
@code{
private SpinnerType SpinnerType = SpinnerType.Fabric;
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
private async Task ChangeType()
{
SpinnerType = SpinnerType.Material;
await Task.Delay(100);
StateHasChanged();
}
}
CssClass
Add a custom CSS class name to the Spinner after the component is created.
The following example shows how to dynamically set the CssClass property after creating the Spinner in a Blazor Razor page.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Spinner
<div>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
<SfButton @onclick="@ChangeClass">Change CSS Class</SfButton>
<div id="container">
<SfSpinner @bind-Visible="@VisibleProperty" CssClass="@CssClassName">
</SfSpinner>
</div>
</div>
@code{
private string CssClassName { get; set; } = "";
private bool VisibleProperty { get; set; } = false;
private async Task ClickHandler()
{
this.VisibleProperty = true;
await Task.Delay(2000);
this.VisibleProperty = false;
}
private async Task ChangeClass()
{
this.CssClassName = "e-customClass";
StateHasChanged();
}
}
<style>
.e-spinner-pane.e-customClass .e-spinner-inner .e-spin-material {
stroke: #808080;
}
</style>