New to Telerik UI for Blazor? Download free 30-day trial

Loader Inside a Button


Product Button for Blazor,
Loader for Blazor


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.


  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" )

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

    public async Task GenerateReport()
        IsGeneratingReport = true;

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

        IsGeneratingReport = false;

See Also

In this article