Spinner and Progress in Blazor ProgressButton Component

7 Aug 20267 minutes to read

This section describes how to customize the spinner and configure progress behavior in the ProgressButton, including positioning and sizing the spinner, using a custom spinner template, animating content, changing step increments, updating progress dynamically, pausing/resuming, and completing progress programmatically.

Spinner

Change spinner position

Change the spinner position using the Position property of SpinSettings. By default, the spinner is positioned to the Left of the ProgressButton. You can set it to Left, Right, Top, Bottom, or Center.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="Top">
    <ProgressButtonSpinSettings Position="SpinPosition.Top"></ProgressButtonSpinSettings>
</SfProgressButton>
<SfProgressButton Content="Right">
    <ProgressButtonSpinSettings Position="SpinPosition.Right"></ProgressButtonSpinSettings>
</SfProgressButton>
<SfProgressButton Content="Bottom">
    <ProgressButtonSpinSettings Position="SpinPosition.Bottom"></ProgressButtonSpinSettings>
</SfProgressButton>
<SfProgressButton Content="Center">
    <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
</SfProgressButton>

Change spinner size

Change the spinner size using the Width property of SpinSettings. Width is specified in pixels; the spinner is rendered as a square. In this example, the width is set to 20.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="Submit">
    <ProgressButtonSpinSettings Position="SpinPosition.Right" Width="20"></ProgressButtonSpinSettings>
</SfProgressButton>

Spinner template

Use a custom spinner by specifying the SpinTemplate property of SpinSettings with custom styles.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="Submit">
    <ProgressButtonSpinSettings Position="SpinPosition.Right" Width="20">
        <SpinTemplate>
            <div class="template"></div>
        </SpinTemplate>
    </ProgressButtonSpinSettings>
</SfProgressButton>

<style>
    @@keyframes custom-rolling {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .template {
        border: 2px solid green;
        border-style: dotted;
        border-radius: 50%;
        border-top-color: transparent;
        border-bottom-color: transparent;
        height: 16px;
        width: 16px;
        -webkit-animation: custom-rolling 1.3s linear infinite;
        animation: custom-rolling 1.3s linear infinite;
    }
</style>

Progress

Content animation

The Content of the ProgressButton can be animated during progress using the Effect property of AnimationSettings. You can also set a custom duration (in milliseconds) and timing function using the Duration and Easing properties. Valid Easing values are Linear, EaseInOut, EaseIn, and EaseOut. The possible Effect values are None, SlideLeft, SlideRight, SlideUp, SlideDown, ZoomIn, and ZoomOut.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="Slide Right">
    <ProgressButtonSpinSettings Position="SpinPosition.Center"></ProgressButtonSpinSettings>
    <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.SlideRight" Duration= "400" Easing="Linear"></ProgressButtonAnimationSettings>
</SfProgressButton>

Change step of the ProgressButton

The progress can be visualized at the specified interval by changing the Step property in the OnBegin event of the ProgressButton. Step accepts a value between 1 and 100 and represents the percentage increment between progress updates. In this example, the Step property is set to 20 to show progress at every 20% increment.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Content="Progress Step" CssClass="e-hide-spinner">
    <ProgressButtonEvents OnBegin="Begin"></ProgressButtonEvents>
</SfProgressButton>

@code{
    private void Begin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        args.Step = 20;
    }
}

NOTE

The class e-hide-spinner hides the spinner in the ProgressButton. For more information, see the Hide Spinner in Blazor ProgressButton section.

Change Progress state dynamically

The progress state can be changed dynamically by modifying the Percent event argument in the OnBegin, Progressing, and OnEnd events. In this example, on 40% completion of progress, the Percent property is set to 90 to show a dynamic change in the progress state.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Content="@Content" Duration="15000" CssClass="e-hide-spinner">
    <ProgressButtonEvents OnBegin="Begin" Progressing="Progressing" OnEnd="End"></ProgressButtonEvents>
</SfProgressButton>

@code {
    public string Content = "Progress";
    public void Begin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Progress " + args.Percent + " %";
    }
    public void Progressing(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Progressing " + args.Percent + " %";
        if (args.Percent == 40)
        {
            args.Percent = 90;
        }
    }
    public void End(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Progress " + args.Percent + " %";
    }
}

Start and Stop methods

Pause and resume the progress using the StopAsync and StartAsync methods, respectively. StartAsync accepts an optional duration (in milliseconds) that controls the total time for the next progress run. In this example, an external SfButton is used to start, pause, and resume the ProgressButton.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="@Content" EnableProgress="true" CssClass="@CssClass" IconCss="@IconCss" @ref="ProgressBtn">
    <ProgressButtonEvents OnEnd="End"></ProgressButtonEvents>
</SfProgressButton>
<SfButton OnClick="Click">Start And Stop</SfButton>

@code {
    SfProgressButton ProgressBtn;
    public string Content = "Download";
    public string CssClass = "e-hide-spinner";
    public string IconCss = "e-icons e-download";

    public async Task Click()
    {
        if(Content == "Download")
        {
            Content = "Pause";
            IconCss = "e-icons e-pause";
        }
        else if (this.Content == "Pause")
        {
            Content = "Resume";
            IconCss = "e-icons e-play";
            await ProgressBtn.StopAsync();
        }
        else if (this.Content == "Resume")
        {
            Content = "Pause";
            IconCss = "e-icons e-pause";
            await ProgressBtn.StartAsync();
        }
    }

    public void End(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Download";
        IconCss = "e-icons e-download";
    }
}

<style>
    .e-download::before {
       content: '\e75d';
    }

    .e-play::before {
        content: '\e72d';
    }

    .e-pause::before {
        content: '\e757';
    }
</style>

EndProgressAsync method

Complete the progress by calling the EndProgressAsync method. It returns a Task that completes once the progress is halted and the spinner is hidden. In this example, an external SfButton is used to complete the running progress.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="Progress Button" EnableProgress="true" @ref="ProgressBtnObj">
    <ProgressButtonSpinSettings Position="SpinPosition.Left"></ProgressButtonSpinSettings>
    <ProgressButtonAnimationSettings Effect="Syncfusion.Blazor.SplitButtons.AnimationEffect.SlideRight" Duration="400" Easing="Linear"></ProgressButtonAnimationSettings>
</SfProgressButton>
<SfButton @onclick="OnCompleteClick">Complete</SfButton>

@code
{
    SfProgressButton ProgressBtnObj;
    private async Task OnCompleteClick()
    {
        await ProgressBtnObj.EndProgressAsync();
    }
}