Blazor Bootstrap: Preload Component Examples

Preload:

<h4 class="my-4">PageLoading Examples</h4>

<Preload Color="@Color"></Preload>

<div class="row">
    <div class="mb-3 col-3">
        Spinner Color:
        <select class="form-select mb-2 mt-2" value="@SpinnerColorAsString" @onchange="(async (args) => { await OnSpinnerColorChangedAsync(args); })">
            <option value="0">None</option>
            <option value="1">Primary</option>
            <option value="2">Secondary</option>
            <option value="3">Success</option>
            <option value="4">Danger</option>
            <option value="5">Warning</option>
            <option value="6">Info</option>
            <option value="7">Light</option>
            <option value="8">Dark</option>
        </select>
    </div>
</div>

@code {

    public string SpinnerColorAsString { get; set; } = "7";
    public SpinnerColor Color { get; set; } = SpinnerColor.Light;

    [Inject] protected PreloadService PageLoadingService { get; set; }

    protected override void OnInitialized()
    {
        Task.Run(async () => await LoadSpinnerAsync());
    }

    private async Task OnSpinnerColorChangedAsync(ChangeEventArgs args)
    {
        SpinnerColorAsString = args.Value.ToString();
        Color = (SpinnerColor)int.Parse(SpinnerColorAsString);

        await LoadSpinnerAsync();
    }

    private async Task LoadSpinnerAsync()
    {
        try
        {
            PageLoadingService.Show();
            await Task.Delay(5000);
        }
        catch
        {
            // catch exception
        }
        finally
        {
            PageLoadingService.Hide();
        }
    }
}

Blazor Bootstrap Links:

1. Blazor Bootstrap: Quick Start
2. Blazor Bootstrap: Alert Component Examples
3. Blazor Bootstrap: Buttons Examples
4. Blazor Bootstrap: Icons Component Examples
5. Blazor Bootstrap: Modal Component Examples
6. Blazor Bootstrap: Offcanvas Component Example
7. Blazor Bootstrap: Preload Component Examples
8. Blazor Bootstrap: Toasts Component Examples
9. Blazor Bootstrap: Tooltip Component Examples