Search results

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 ProgressButton. 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 Template property of SpinSettings with custom styles.

The following sample demonstrates the above functionalities of the spinner.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsProgressButton Content="Submit">
    <ProgressButtonSpinSettings Position="SpinPosition.Right" Width="20" Template = "<div class='template'></div>"></ProgressButtonSpinSettings>
</EjsProgressButton>

<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>

Output be like

Button Sample

Progress

Content animation

The Content of the ProgressButton 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.EJ2.Blazor.SplitButtons

<EjsProgressButton Content="Slide Right">
    <ProgressButtonSpinSettings Position="SpinPosition.Left"></ProgressButtonSpinSettings>
    <ProgressButtonAnimationSettings Effect="AnimationEffect.SlideRight" Duration= "400" Easing="Linear"></ProgressButtonAnimationSettings>
</EjsProgressButton>

Output be like ProgressButton Sample

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. In this demo, the step property is set to 20 to show progress at every 20% increment.

@using Syncfusion.EJ2.Blazor.SplitButtons

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

@code{
    private void begin(ProgressEventArgs args)
    {
        args.Step = 20;
    }
}

Output be like ProgressButton Sample

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

Change Progress state dynamically

The progress state can be changed dynamically by modifying the Percent property in the Progressing 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 events.

@using Syncfusion.EJ2.Blazor.SplitButtons

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

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

Output be like ProgressButton Sample

Start and Stop Methods

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

@using Syncfusion.EJ2.Blazor.SplitButtons

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

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

    public void Click()
    {
        if(Content == "Download")
        {
            this.Content = "Pause";
            this.IconCss = "e-icons e-pause";
        }
        else if (this.Content == "Pause")
        {
            this.Content = "Resume";
            this.IconCss = "e-icons e-play";
            ProgressBtn.Stop();
        }
        else if (this.Content == "Resume")
        {
            this.Content = "Pause";
            this.IconCss = "e-icons e-pause";
            ProgressBtn.Start();
        }
    }

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

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

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

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

Output be like ProgressButton Sample