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.

razor
default.cs
@section ControlsSection{

@Html.EJS().ProgressButton("submit").Content("Submit").SpinSettings(ViewBag.spinSettings).Render()

}
<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>
public class HomeController : Controller
{
    public IActionResult Index()
    {
        SpinSettings spinSettings = new SpinSettings();
        spinSettings.position = "Right";
        spinSettings.width = 20;
        spinSettings.template = "<div class='template'></div>";
        ViewBag.spinSettings = spinSettings;
        return View();
    }
}

public class SpinSettings
{
    public string position
    {
        get;
        set;
    }

    public string template
    {
        get;
        set;
    }

    public int width
    {
        get;
        set;
    }
}

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.

razor
default.cs
@section ControlsSection{

@Html.EJS().ProgressButton("slideleft").Content("Slide Left").EnableProgress(true).AnimationSettings(ViewBag.animationSettings).SpinSettings(ViewBag.spinSettings).Render()

}
public class HomeController : Controller
{
    public IActionResult Index()
    {
        SpinSettings spinSettings = new SpinSettings();
        spinSettings.position = "Center";
        ViewBag.spinSettings = spinSettings;

        AnimationSettings animationSettings = new AnimationSettings();
        animationSettings.effect = "Slide Left";
        animationSettings.duration = 500;
        animationSettings.easing = "linear";
        ViewBag.animationSettings = animationSettings;
        return View();
    }
}
public class SpinSettings
{
    public string position
    {
        get;
        set;
    }
}

public class AnimationSettings
{
    public string effect
    {
        get;
        set;
    }

    public int duration
    {
        get;
        set;
    }

    public string easing
    {
        get;
        set;
    }
}

Change step of the ProgressButton

The progress state can be visualized to the specified interval by changing the step property in the begin event of the ProgressButton. In this demo, the step property is set to 20 to show progress at every 20% increment.

razor
default.cs
@section ControlsSection{

@Html.EJS().ProgressButton("progress").Content("Progress Step").EnableProgress(true).Begin("begin").CssClass("e-hide-spinner").Render()

}
<script>
    function begin(args) {
        args.step = 20;
    }
</script>
public IActionResult Default()
{
        return View();
}

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

Changing progress state dynamically

The progress state can be changed dynamically by modifying the percent property in the progress events. In this demo, on 40% completion of progress, the percent property is set to 90 to show dynamic change of the progress state.

razor
default.cs
@section ControlsSection{

@Html.EJS().ProgressButton("progress").Content("Progress").EnableProgress(true).Duration(15000).Begin("begin").Progress("progress").End("end").CssClass("e-hide-spinner").Render()

}
<script>
    function begin(args) {
        this.content = 'Progress ' + args.percent + '%';
        this.dataBind();
    }

    function progress(args) {
        this.content = 'Progress ' + args.percent + '%';
        this.dataBind();
        if (args.percent === 40) {
            args.percent = 90
        }
    }

    function end(args) {
        this.content = 'Progress ' + args.percent + '%';
        this.dataBind();
    }
</script>
public IActionResult Default()
{
        return View();
}

The method dataBind applies the property changes immediately to the component.

Start and stop methods

You can pause and resume the progress using the stop and start methods, respectively. In this demo, clicking the ProgressButton will pause and resume the progress.

razor
default.cs
@section ControlsSection{

@Html.EJS().ProgressButton("download").Content("Download").EnableProgress(true).IconCss("e-icons e-download").Duration(4000).Created("created").End("end").CssClass("e-hide-spinner").Render()

}
<script>
    function end() {
        var progressBtn = ej.base.getComponent(document.querySelector("#download"), "progress-btn");
        progressBtn.content = 'Download';
        progressBtn.iconCss = 'e-icons e-download';
        progressBtn.dataBind();
    }

    function created() {
        var progressBtn = ej.base.getComponent(document.querySelector("#download"), "progress-btn");
        progressBtn.element.addEventListener('click', clickHandler);
    }

    function clickHandler() {
        var progressBtn = ej.base.getComponent(document.querySelector("#download"), "progress-btn");
        if (progressBtn.content === 'Download') {
            progressBtn.content = 'Pause';
            progressBtn.iconCss = 'e-icons e-pause';
            progressBtn.dataBind();
        }
        // clicking on ProgressButton will stop the progress when the text content is 'Pause'
        else if (progressBtn.content === 'Pause') {
            progressBtn.content = 'Resume';
            progressBtn.iconCss = 'e-icons e-play';
            progressBtn.dataBind();
            progressBtn.stop();
        }
        // clicking on ProgressButton will start the progress when the text content is 'Resume'
        else if (progressBtn.content === 'Resume') {
            progressBtn.content = 'Pause';
            progressBtn.iconCss = 'e-icons e-pause';
            progressBtn.dataBind();
            progressBtn.start();
        }
    }
</script>
<style>
    .e-download::before {
        content: '\e824';
    }

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

    .e-pause::before {
        content: '\e753';
    }
</style>
public IActionResult Default()
{
        return View();
}

See Also