てぃぐれのプログラマwiki

ワクワクに従う

ぐるぐる スピナーを出す方法【C# Blazor】

経緯

Webの処理の待機中にスピナーを出したい。

 

対処法

divの中身はbootstrapから頂いております。bootstrapのコンポーネントが入ってない人はそれらを記述する必要がindex.html等であります。

@page "/counter"


@if(IsWaiting)
{
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>    
}
boolのtrue falseで出す出さないをすることで、検索する時等につかうことができます。
@code {

    private bool IsWaiting = false;

    private async Task OnClick()
    {

        IsWaiting = true;

        try
        {
            await Task.Delay(3000,token);
        }finally
        {
            IsWaiting = false;            
        }
  }
}