loader-inside-button.md

title	description	type	page_title	slug	position	tags	ticketid	res_type	category
Loader Inside a Button	How to add a Telerik loading animation inside a button with the Loader component.	how-to	Blazor Loader Inside a Button	loader-kb-inside-button		loader, button		kb	knowledge-base

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.

caption 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