Spinner and Progress in Blazor ProgressButton Component

18 Dec 20236 minutes to read

This section explains the Spinner and Progress of Progress Button.

Spinner

Change spinner position

Spinner position can be changed by modifying the Position property of SpinSettings. By default, the spinner is positioned at the left of the Progress Button. You can position it at the Left, Right, top, bottom, or Center of the text content.

Change spinner size

Spinner size can be changed by modifying the Width property of SpinSettings. In this demo, the width is set to 20 to change the spinner size.

Spinner template

You can use 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;
    }

    .template {
        -webkit-animation: custom-rolling 1.3s linear infinite;
        animation: custom-rolling 1.3s linear infinite;
    }
</style>

Progress

Content animation

The Content of the Progress Button can be animated during progress using the Effect property of AnimationSettings. You can also set custom duration and timing function using the Duration and Easing properties. 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 Progress Button

The progress can be visualized at the specified interval by changing the Step property in the OnBegin event of the Progress Button. In this demo, 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 Progress Button, For more information, see hide spinner section.

Change Progress state dynamically

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

@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

You can pause and resume the progress using the Stop and Start methods, respectively. In this example, clicking the Progress Button will pause and resume the progress.

@using Syncfusion.Blazor.SplitButtons

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

@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.Stop();
        }
        else if (this.Content == "Resume")
        {
            Content = "Pause";
            IconCss = "e-icons e-pause";
            await ProgressBtn.Start();
        }
    }

    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

You can complete the progress by using the EndProgressAsync method and it will also hide the spinner. In this example, another button has been added to complete the current progress of the progress button.

@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();
    }
}