Class SpinnerTemplates
Specifies the template options for the SfSpinner component.
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Spinner
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class SpinnerTemplates : SfBaseComponent, IAsyncDisposableRemarks
The SpinnerTemplates component is used as a child tag within the SfSpinner component to define custom content to be displayed within the spinner, replacing the default animation. This component must be a direct child of SfSpinner.
Examples
In the following example, a custom template is defined for the SfSpinner.
<SfSpinner @bind-Visible="@SpinnerVisible">
<SpinnerTemplates>
<Template>
<div class="custom-spinner-template">
<div class="spinner-dot"></div>
<span>Loading...</span>
</div>
</Template>
</SpinnerTemplates>
</SfSpinner>
<style>
.custom-spinner-template {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.spinner-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #007bff;
animation: bounce 1.4s infinite ease-in-out both;
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
</style>
@code {
private bool SpinnerVisible { get; set; } = true;
}Constructors
SpinnerTemplates()
Declaration
public SpinnerTemplates()Properties
Template
Gets or sets the custom content to be displayed within the spinner.
Declaration
public RenderFragment Template { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.RenderFragment | A Microsoft.AspNetCore.Components.RenderFragment that defines the template for the spinner. The default value is null. |
Remarks
When this property is set, the default spinner animation is replaced with the custom content provided in the template. This allows for complete customization of the spinner's visual appearance.
Examples
<SfSpinner @bind-Visible="@SpinnerVisible">
<SpinnerTemplates>
<Template>
<div class="custom-spinner-template">
<div class="spinner-dot"></div>
<span>Loading...</span>
</div>
</Template>
</SpinnerTemplates>
</SfSpinner>Methods
DisposeAsyncCore()
Releases all resources associated with this component.
Declaration
protected override ValueTask DisposeAsyncCore()Returns
| Type |
|---|
| System.Threading.Tasks.ValueTask |
Overrides
Remarks
This method is called when the component is being disposed. It performs cleanup operations and prevents memory leaks by clearing references.
OnInitialized()
Performs component initialization and updates the parent component with the custom template if provided.
Declaration
protected override void OnInitialized()Remarks
This method is invoked when the component is initialized. It checks if a Template has been provided and updates the parent SfSpinner component accordingly.