Chandradev's Blog

Hi, while working with Blazor on API Call, we will get a scenario to display progress bar, If API Call is taking long time.

Here is the code snippet for this task

@page "/"

<h4> Progress bar demo in blazor</h4> 
<br />
<b> @message</b>
<img src="Images/newprogress.gif" height="100" class="@ccsStyle " />
<br />
<button @onclick="@GetResult">
    Click Here
</button>
<style>
    .displayBlock {
        display: block;
    }

    .displayNone {
        display: none;
    }
</style>

@code {
    string message = string.Empty;
    string ccsStyle = "displayNone";

    private async Task GetResult()
    {
        ccsStyle = "displayBlock";
        await Task.Delay(3000); // Here will be api call
        ccsStyle = "displayNone";
        message = "API Call Completed";
    }
}