How to display Progress Bar in Blazor ?

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
    .displayBlock {
        display: block;

    .displayNone {
        display: none;

@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";

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.