Customize progress using cssClass in Blazor Progress Button component

20 Apr 2021 / 1 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.

@using Syncfusion.Blazor.SplitButtons

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

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

Output be like

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!