Class SfSpinner

The Spinner is a component that provides a visual indication of an ongoing operation, such as loading or processing, to keep the user informed and engaged.

Inheritance

System.Object

SfBaseComponent

SfSpinner

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Spinner

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class SfSpinner : SfBaseComponent, IAsyncDisposable

Remarks

The SfSpinner can be customized with different sizes, colors, and templates to match the application's design. It supports embedding within other components and can be shown or hidden programmatically. This component ensures accessibility compliance with proper ARIA attributes and supports content security policies.

Examples

A simple Spinner component.

 
<SfSpinner @bind-Visible="@SpinnerVisible" />

@code {
    private bool SpinnerVisible { get; set; } = true;
}

A simple example of using SfSpinner.

<SfSpinner Created="@HandleCreatedAsync" 
                   OnOpen="@HandleOpenAsync" 
                   OnClose="@HandleCloseAsync" 
                   Destroyed="@HandleDestroyedAsync" >
</SfSpinner>

@code {
    private void HandleCreatedAsync(object args)
    {
        // Handle the created event
    }

    private void HandleOpenAsync(SpinnerEventArgs args)
    {
        // Handle the before open event
    }

    private void HandleCloseAsync(SpinnerEventArgs args)
    {
        // Handle the before close event
    }

    private void HandleDestroyedAsync(object args)
    {
        // Handle the destroyed event
    }
}

Constructors

SfSpinner()

Declaration

public SfSpinner()

Properties

ChildContent

Gets or sets the child content to be rendered within the spinner container.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the nested content. The default value is null.

Remarks

This parameter allows you to define nested content within the spinner component, such as child components or HTML elements. The child content is rendered inside the spinner container using a cascading value for communication.

Examples

<SfSpinner Visible="true">
    <div>Additional content here</div>
</SfSpinner>

Created

Gets or sets the event callback that is invoked after the SfSpinner is created and rendered.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object. The default value is an empty callback.

Remarks

This event can be used to perform initialization actions once the spinner is fully rendered. The event is invoked only on the first render cycle of the component.

Examples

<SfSpinner Created="@OnSpinnerCreated" />

@code {
    private async Task OnSpinnerCreated(object args)
    {
        // Perform initialization actions
    }
}

CssClass

Gets or sets the CSS class names to be appended to the root element of the spinner.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A System.String representing one or more CSS class names separated by spaces. The default value is null.

Remarks

This property allows you to apply custom CSS classes to the spinner for customized appearance and styling. Multiple classes should be space-separated. Classes are dynamically added and removed as needed.

Examples

<SfSpinner CssClass="custom-spinner large-spinner" />

Destroyed

Gets or sets the event callback that is invoked after the SfSpinner is destroyed and removed from the DOM.

Declaration

public EventCallback<object> Destroyed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object. The default value is an empty callback.

Remarks

This event can be used to perform cleanup actions after the spinner has been completely removed from the DOM. This is useful for releasing resources or updating application state.

Examples

<SfSpinner Destroyed="@OnSpinnerDestroyed" />

@code {
    private async Task OnSpinnerDestroyed(object args)
    {
        // Perform cleanup actions
    }
}

Label

Gets or sets the label text displayed below the spinner animation.

Declaration

public string Label { get; set; }

Property Value

Type	Description
System.String	A System.String that specifies the label for the spinner. The default value is null.

Remarks

This property provides descriptive text for the spinner, enhancing user experience and providing context. If not provided, the default "Loading" aria-label is automatically applied for accessibility compliance. This improves accessibility for screen readers and assistive technologies.

Examples

<SfSpinner Label="Processing..." />

OnClose

Gets or sets the event callback that is invoked before the SfSpinner is hidden.

Declaration

public EventCallback<SpinnerEventArgs> OnClose { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SpinnerEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked before the spinner is removed from view. The callback receives a SpinnerEventArgs.

Remarks

This event allows you to execute custom logic before the spinner is hidden. You can cancel the hide operation by setting Cancel to true.

Examples

<SfSpinner OnClose="@OnSpinnerClose" />

@code {
    private async Task OnSpinnerClose(SpinnerEventArgs args)
    {
        // Perform cleanup or validation before hiding
    }
}

OnOpen

Gets or sets the event callback that is invoked before the SfSpinner is shown.

Declaration

public EventCallback<SpinnerEventArgs> OnOpen { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SpinnerEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked before the spinner is displayed. The callback receives a SfSpinner.

Remarks

This event allows you to perform custom logic before the spinner becomes visible. You can cancel the show operation by setting Cancel to true.

Examples

<SfSpinner OnOpen="@OnSpinnerOpen" />

@code {
    private async Task OnSpinnerOpen(SpinnerEventArgs args)
    {
        // Perform validation or setup before showing
        if (someCondition)
        {
            args.Cancel = true; // Prevent showing
        }
    }
}

Size

Gets or sets the size of the spinner's animation element.

Declaration

public string Size { get; set; }

Property Value

Type	Description
System.String	A System.String specifying the size. Valid values include pixel measurements (e.g., "40px"), percentages (e.g., "100%"), or null for default. The default value is null.

Remarks

The size determines both the width and height of the spinner's animation element, maintaining a square aspect ratio. If not specified, the component uses a default size appropriate for the chosen theme.

Examples

<SfSpinner Size="50px" />

Thickness

Gets or sets the thickness of the spinner's stroke line.

Declaration

public string Thickness { get; set; }

Property Value

Type	Description
System.String	A System.String specifying the thickness value. Valid values include pixel measurements (e.g., "4px") or percentages. The default value is null, which applies a 4px thickness.

Remarks

The thickness determines the width of the spinner's animation line. This property helps customize the visual appearance of the spinner to match your application's design. If not specified, the component uses a default thickness appropriate for the chosen theme.

Examples

<SfSpinner Thickness="6px" Visible="true" />

Visible

Gets or sets a value indicating whether the spinner component is visible on the screen.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true to display the spinner; false to hide it. The default value is false.

Remarks

When set to true, the spinner is displayed and rendered. When set to false, it is hidden from view. This property supports two-way binding via the VisibleChanged event callback.

Examples

<SfSpinner @bind-Visible="@isLoading" />

VisibleChanged

Gets or sets the event callback invoked when the Visible property changes.

Declaration

public EventCallback<bool> VisibleChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the spinner's visibility state is modified.

Remarks

This property is used to support two-way data binding with the Visible parameter using the @bind-Visible directive. When the visibility changes, this callback is invoked to update the parent component's state.

ZIndex

Gets or sets the CSS z-index value for the spinner, controlling its stacking order relative to other elements.

Declaration

public string ZIndex { get; set; }

Property Value

Type	Description
System.String	A System.String representing the z-index value (e.g., "1000", "auto"). The default value is `"auto"`.

Remarks

A higher z-index value places the spinner in front of elements with lower z-index values. This is particularly useful for overlay or modal scenarios where the spinner needs to appear above other content.

Examples

<SfSpinner ZIndex="1000" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

DisposeAsyncCore()

Releases all resources associated with the component upon disposal.

Declaration

protected override ValueTask DisposeAsyncCore()

Returns

Type
System.Threading.Tasks.ValueTask

Overrides

Syncfusion.Blazor.Toolkit.SfBaseComponent.DisposeAsyncCore()

Remarks

This method is called when the component is being removed from the UI. It clears child content, resets attributes, and invokes the Destroyed event if subscribed, ensuring proper resource management and preventing memory leaks.

HideAsync()

Hides the spinner, removing it from the visible display.

Declaration

public Task HideAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method hides the spinner, removing it from display. It should be called after the associated loading or processing task is complete. Calling this method triggers the event, which can be used to cancel the operation.

Examples

The following example demonstrates how to use the ShowAsync() and HideAsync() methods.

<SfSpinner @ref="Spinner" />
<button @onclick="ProcessData">Process Data</button>
@code {
    private SfSpinner? Spinner;
    private async Task ProcessData()
    {
        await Spinner.ShowAsync();
        // Simulate long-running operation
        await Task.Delay(2000);
        await Spinner.HideAsync();
    }
}

OnAfterRenderAsync(Boolean)

Executes after the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Indicates whether this is the first render cycle. When true, this is the initial render; when false, the component is being re-rendered.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Overrides

Syncfusion.Blazor.Toolkit.SfBaseComponent.OnAfterRenderAsync(System.Boolean)

Remarks

On the initial render, this method sets the Syncfusion.Blazor.Toolkit.Spinner.SfSpinner._isInitialLoad flag to false and invokes the Created event if it has been subscribed. This is part of the component's initialization sequence.

OnInitializedAsync()

Initializes the component when it is ready to start and sets up the initial state.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Overrides

Syncfusion.Blazor.Toolkit.SfBaseComponent.OnInitializedAsync()

Remarks

This method is invoked by the Blazor framework when the component is first created. It sets up the initial state of the spinner, such as its style, visibility, and CSS class, based on the provided parameters. It also configures accessibility attributes like role and aria-label. This is part of the component initialization process to ensure accessibility compliance.

OnParametersSetAsync()

Handles parameter updates from the parent component.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is called when the component receives new or updated parameters. It tracks changes to properties like CssClass, Visible, and ZIndex and triggers a state update if any of these properties have changed.

ShowAsync()

Displays the spinner visually on the screen.

Declaration

public Task ShowAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method displays the spinner, making it visible to the user. It is useful for indicating a loading or processing state in the application. Calling this method triggers the event, which can be used to cancel the operation.

Examples

The following example demonstrates how to use the ShowAsync() and HideAsync() methods.

<SfSpinner @ref="Spinner" />
<button @onclick="ProcessData">Process Data</button>
@code {
    private SfSpinner? Spinner;
    private async Task ProcessData()
    {
        await Spinner.ShowAsync();
        // Simulate long-running operation
        await Task.Delay(2000);
        await Spinner.HideAsync();
    }
}

Implements

System.IAsyncDisposable