demo sample for Spinner or progress bar while calling web api call

[chandradev]

Hi Team,

Could you please give me code snippet for Blazordemo sample for Spinner or progress bar while calling web api call ?

[Revanth Krishnan]

Hi Chandradev, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Could you please give me the code snippet for Blazor demo sample for Spinner or progress bar while calling web API call?” 

 

We have analyzed your requirement, and we have prepared a blazor demo sample to show spinner when calling the web API call for your reference, 

 

Code Snippet: 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Spinner 

 

<div> 

    <SfButton @onclick="@ClickHandler">Load Data</SfButton> 

    <div id="container"> 

        @if (this.showData) { 

            <table class="table"> 

                <thead> 

                    <tr> 

                        <th>Date</th> 

                        <th>Temp. (C)</th> 

                        <th>Temp. (F)</th> 

                        <th>Summary</th> 

                    </tr> 

                </thead> 

                <tbody> 

                    @foreach (var forecast in forecasts) 

                    { 

                        <tr> 

                            <td>@forecast.Date.ToShortDateString()</td> 

                            <td>@forecast.TemperatureC</td> 

                            <td>@forecast.TemperatureF</td> 

                            <td>@forecast.Summary</td> 

                        </tr> 

                    } 

                </tbody> 

            </table> 

        } 

        <SfSpinner @bind-Visible="@VisibleProperty" CssClass="e-customClass"> 

        </SfSpinner> 

    </div> 

</div> 

 

 

@code{ 

    private WeatherForecast[] forecasts; 

    public bool showData { get; set; } = false; 

 

    //The visile property is used to show and hide the spinner. 

    private bool VisibleProperty { get; set; } = false; 

 

    private async Task ClickHandler() 

    { 

        // To show the spinner. 

        this.VisibleProperty = true; 

        await Task.Delay(2000); 

        forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 

        this.showData = true; 

        // To hide the spinner. 

        this.VisibleProperty = false; 

    } 

} 

 

<style> 

    .e-spinner-pane.e-customClass .e-spinner-inner .e-spin-bootstrap4 { 

        stroke: #808080; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Spinner_Blazor_Application-1696835675 

 

Please check the below documentation for further reference, 

Documentation: https://blazor.syncfusion.com/documentation/spinner/getting-started/ 

 

Please check the above code snippet, sample, and documentation and let us know if it satisfies your requirement. 

 

Regards, 

Revanth