Customizing loading indicator in Blazor Pivot Table Component

5 Nov 20251 minute to read

The pivot table displays a loading indicator during data processing operations such as filtering, sorting, and aggregation calculations. The default loading spinner can be customized to match application design requirements using the SpinnerTemplate property.

The SpinnerTemplate property accepts an HTML string that defines the custom loading indicator appearance. This enables control over the visual presentation, including custom styling and animations.

NOTE

You can also disable the loading indicator by setting SpinnerTemplate to empty string.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
	<PivotViewDataSourceSettings DataSource="@data">
		<PivotViewTemplates>
			<SpinnerTemplate>
				@{
					<i class='fa fa-cog fa-spin fa-3x fa-fw'></i>
				}
			</SpinnerTemplate>
		</PivotViewTemplates>
		<PivotViewColumns>
			<PivotViewColumn Name="Year"></PivotViewColumn>
			<PivotViewColumn Name="Quarter"></PivotViewColumn>
		</PivotViewColumns>
		<PivotViewRows>
			<PivotViewRow Name="Country"></PivotViewRow>
			<PivotViewRow Name="Products"></PivotViewRow>
		</PivotViewRows>
		<PivotViewValues>
			<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
			<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
		</PivotViewValues>
		<PivotViewFormatSettings>
			<PivotViewFormatSetting Name="Sold" Format="N"></PivotViewFormatSetting>
			<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
		</PivotViewFormatSettings>
	</PivotViewDataSourceSettings>
</SfPivotView>
@code {
	public List<ProductDetails> data { get; set; }
	protected override void OnInitialized()
	{
		this.data = ProductDetails.GetProductData().ToList();
		//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
	}
}

NOTE

You can refer to Blazor Pivot Table feature tour page for its groundbreaking feature representations. You can also explore Blazor Pivot Table example to know how to render and configure the pivot table.