Customize progress using cssClass

17 Feb 20221 minute to read

You can customize the background filler UI using the cssClass property.

• Adding e-vertical to cssClass shows vertical progress.
• Adding e-progress-top to cssClass shows progress at the top.

You can also show reverse progress by adding custom class to the cssClass property.

CSHTML

@Html.EJS().ProgressButton("vprogress").Content("Vertical Progress").EnableProgress(true).CssClass("e-hide-spinner e-vertical").Duration(4000).Render()
@Html.EJS().ProgressButton("tprogress").Content("Progress Top").EnableProgress(true).CssClass("e-hide-spinner e-progress-top").Duration(4000).Render()
@Html.EJS().ProgressButton("rprogress").Content("Reverse Progress").EnableProgress(true).CssClass("e-hide-spinner e-reverse-progress").Duration(4000).Render()

<style>
    .e-reverse-progress .e-progress {
        right: 0;
        left: auto;
    }

    button {
        margin: 25px;
    }
</style>

Default.cs

public ActionResult Default()
{
        return View();
}