Style and Appearance in Blazor Progress Button

27 Aug 20267 minutes to read

Customize the appearance of the Blazor Progress Button by overriding the built-in CSS selectors of the component. Use scoped styles (for example, by adding a custom class via the CssClass parameter) to limit changes to specific instances. To create a consistent look-and-feel across the application, consider using built-in themes or generating a custom theme with the Theme Studio.

CSS Class	Purpose of Class
.e-progress-btn	Targets the Blazor Progress Button root element for background, color, border, font, and size customization.
.e-progress-btn:hover	Targets the Blazor Progress Button in its hovered state.
.e-progress-btn:focus	Targets the Blazor Progress Button when it receives keyboard or programmatic focus.
.e-progress-btn:active	Targets the Blazor Progress Button when it is actively pressed.
.e-progress-btn.e-active	Targets the Blazor Progress Button during the active progress state.
.e-progress-btn .e-btn-content	Targets the text label content inside the Blazor Progress Button.
.e-progress-btn .e-progress	Targets the progress fill indicator that animates across the button.
.e-progress-btn.e-vertical .e-progress	Targets the progress fill when the vertical progress style is applied.
.e-progress-btn .e-spinner-pane	Targets the container of the spinner element inside the Blazor Progress Button.
.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle	Targets the circular spinner SVG path for color and stroke customization.

Change text content and styles of the Blazor Progress Button

Change the button text and styles during the progress state by updating the Content and the CssClass parameters in the OnBegin and OnEnd event handlers.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton Content="@Content" EnableProgress="true" CssClass="@CssClass" Duration="4000">
    <ProgressButtonEvents OnBegin="Begin" OnEnd="End"></ProgressButtonEvents>
</SfProgressButton>

@code {
    public string Content = "Upload";
    public string CssClass = "e-hide-spinner";
    public void Begin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Uploading...";
        CssClass = "e-hide-spinner e-info";
    }
    public async Task End(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args)
    {
        Content = "Success";
        CssClass = "e-hide-spinner e-success";
        await Task.Delay(1000);
        Content = "Upload";
        CssClass = "e-hide-spinner";
    }
}

Customize progress using CssClass in Blazor Progress Button

Customize the progress indicator (filler) by using the CssClass property.

• Adding e-vertical to CssClass displays vertical progress.
• Adding e-progress-top to CssClass places the progress at the top of the button.

Reverse progress can also be shown by adding a custom class through 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>

Stop progress indicator in Blazor Progress Button

Stop the active progress programmatically by calling the EndProgressAsync method on the Blazor Progress Button instance obtained via @ref. In the following example, clicking the Stop button invokes the handler that awaits EndProgressAsync to halt the current progress.

@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.Buttons

<SfProgressButton Content="Spin Left" IsPrimary="true" EnableProgress="true" Duration="4000" @ref="ProgressBtnObj"></SfProgressButton>
<SfButton Content="Stop" OnClick="clicked"></SfButton>

@code {
    SfProgressButton ProgressBtnObj;
    private async Task clicked()
    {
      await ProgressBtnObj.EndProgressAsync();
    }
}

Hide Spinner in Blazor Progress Button

Hide the spinner in the Blazor Progress Button by applying the built-in e-hide-spinner CSS class to the CssClass parameter. This hides only the spinner while keeping the progress fill visible. Multiple CSS classes can be combined in CssClass as needed.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" CssClass="e-hide-spinner" Content="Progress"></SfProgressButton>

Customizing the font of the Blazor Progress Button

The font family, font size, font weight, and letter spacing of the Blazor Progress Button label can be customized by targeting the .e-progress-btn or .e-progress-btn .e-btn-content CSS class. Scoping these rules through a custom class added via the CssClass property ensures the changes apply only to the targeted instance.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Duration="4000" Content="Upload File" CssClass="e-hide-spinner font-btn"></SfProgressButton>

<style>
    /* Font customization for the Blazor  Progress Button label */
    .font-btn.e-progress-btn .e-btn-content {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
</style>

Customizing the width of the Blazor Progress Button

The width of the Blazor Progress Button is controlled by targeting the .e-progress-btn CSS class. Setting a fixed width or min-width ensures the button maintains a consistent size regardless of its label text length. This is especially useful when the button label changes during progress (for example, switching from “Upload” to “Uploading…”).

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Duration="4000" Content="Export" CssClass="e-hide-spinner width-btn"></SfProgressButton>

<style>
    /* Fixed width for the Blazor  Progress Button */
    .width-btn.e-progress-btn {
        min-width: 160px;
        text-align: center;
    }
</style>

Customizing the background and text color of the Blazor Progress Button

The background color and text color of the Blazor Progress Button can be customized by targeting the .e-progress-btn class. Separate rules for :hover and .e-active states provide visual feedback during interaction and while progress is running.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Duration="4000" Content="Submit" CssClass="custom-color-btn"></SfProgressButton>

<style>
    /* Default state */
    .custom-color-btn.e-progress-btn {
        background-color: #4a90d9;
        color: #ffffff;
        border-color: #357abd;
    }

    /* Hover state */
    .custom-color-btn.e-progress-btn:hover {
        background-color: #357abd;
        border-color: #2a6099;
        color: #ffffff;
    }

    /* Active/progress running state */
    .custom-color-btn.e-progress-btn.e-active {
        background-color: #2a6099;
        color: #ffffff;
    }

    /* Progress fill color */
    .custom-color-btn.e-progress-btn .e-progress {
        background-color: rgba(255, 255, 255, 0.25);
    }
</style>

Customizing the border and border-radius of the Blazor Progress Button

The border style, border width, and border radius of the Blazor Progress Button are set through the .e-progress-btn CSS class. Increasing the border-radius produces a pill-shaped button, while a value of 0 results in a fully square button.

@using Syncfusion.Blazor.SplitButtons

<SfProgressButton EnableProgress="true" Duration="4000" Content="Process" CssClass="e-hide-spinner border-btn"></SfProgressButton>

<style>
    /* Pill-shaped button with custom border */
    .border-btn.e-progress-btn {
        border: 2px solid #4a90d9;
        border-radius: 24px;
        padding: 6px 24px;
    }

    .border-btn.e-progress-btn:hover {
        border-color: #2a6099;
    }

    /* Round the progress fill corners to match the button shape */
    .border-btn.e-progress-btn .e-progress {
        border-radius: 24px;
    }
</style>