Loader Inside a Button

Environment

Product

Button for Blazor, Loader for Blazor

Description

How to add a loading animation inside a Button? The loader indicator show display when the button is clicked. The button should also be disabled while the application is doing some background tasks.

Solution

1. Nest a Telerik Loader inside a Telerik Button.
2. Set the Visible parameter of the Loader to false.
3. Handle the OnClick event of the Button.
4. Toggle the Loader's Visible parameter to true in the Button's OnClick handler, while the application is working in the background.

Blazor Loader inside a Button

<TelerikButton OnClick="@GenerateReport" Enabled="@(!IsGeneratingReport)">
    <TelerikLoader Visible="@IsGeneratingReport" />
    @( IsGeneratingReport ? "Generating Report" : "Generate Report" )
</TelerikButton>

@code {
    public bool IsGeneratingReport { get; set; }

    public async Task GenerateReport()
    {
        IsGeneratingReport = true;

        await Task.Delay(3000); // do actual work here

        IsGeneratingReport = false;
    }
}

See Also

• Blazor Loader
• Blazor Button