Search results

Customize progress using cssClass

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.

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsProgressButton EnableProgress="true" CssClass="e-hide-spinner e-vertical" Duration="4000" Content="Vertical Progress"></EjsProgressButton>
<EjsProgressButton EnableProgress="true" CssClass="e-hide-spinner e-progress-top" Duration="4000" Content="Progress Top"></EjsProgressButton>
<EjsProgressButton EnableProgress="true" CssClass="e-hide-spinner e-reverse-progress" Duration="4000" Content="Reverse Progress"></EjsProgressButton>

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

Output be like

Progress Button Sample