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.

<ejs-progressbutton id="vprogress" content="Vertical Progress" enableProgress="true" cssClass="e-hide-spinner e-vertical" duration="4000"></ejs-progressbutton>
<ejs-progressbutton id="tprogress" content="Progress Top" enableProgress="true" cssClass="e-hide-spinner e-progress-top" duration="4000"></ejs-progressbutton>
<ejs-progressbutton id="rprogress" content="Reverse Progress" enableProgress="true" cssClass="e-hide-spinner e-reverse-progress" duration="4000"></ejs-progressbutton>

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

    button {
        margin: 25px;
    }
</style>
public ActionResult Default()
{
        return View();
}