BlazorExpress.Bulma | An enterprise-class component library built with the Blazor and Bulma CSS frameworks

How it works #

The Spinner component shows a compact loading indicator for asynchronous work such as fetching data, saving changes, or waiting for background tasks.

How to use:

Add the Spinner component to your page.
Optionally set the Color property to a Bulma semantic color that matches the surrounding UI.
Keep the default Label or provide your own accessible loading text for screen readers.

This demo shows the default spinner in a typical inline loading scenario.

Example
View Source

Loading dashboard metrics...

<div class="is-flex is-align-items-center" style="gap: 1rem;">
    <Spinner Color="SpinnerColor.Primary" />
    <span>Loading dashboard metrics...</span>
</div>

Types #

The Spinner component supports SpinnerType.Border, SpinnerType.Grow, and SpinnerType.Dots, letting you choose the visual style that best fits the page.

How to use:

Use the default SpinnerType.Border for the standard spinner style.
Set Type="SpinnerType.Grow" to switch to the grow variant.
Set Type="SpinnerType.Dots" to render a dotted loading indicator.

This demo compares the supported spinner types side by side.

Example
View Source

Border

Grow

Dots

<div class="is-flex is-align-items-center is-flex-wrap-wrap" style="gap: 1.5rem;">
    <div class="has-text-centered">
        <Spinner Color="SpinnerColor.Primary" />
        <div class="mt-2">Border</div>
    </div>
    <div class="has-text-centered">
        <Spinner Color="SpinnerColor.Info" Type="SpinnerType.Grow" />
        <div class="mt-2">Grow</div>
    </div>
    <div class="has-text-centered">
        <Spinner Color="SpinnerColor.Success" Type="SpinnerType.Dots" />
        <div class="mt-2">Dots</div>
    </div>
</div>

Colors #

The Spinner component supports Bulma semantic colors so the loading indicator can align with your status messaging or theme.

How to use:

Set the Color property to a Bulma semantic value such as Primary, Info, Success, or Danger.
Choose a color that stays visible against the spinner's background.

This demo illustrates Bulma semantic color options for the border, grow, and dots spinner types.

Example
View Source

Border

Grow

Dots

<div class="content">
    <p><strong>Border</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" />
        <Spinner Color="SpinnerColor.Link" />
        <Spinner Color="SpinnerColor.Info" />
        <Spinner Color="SpinnerColor.Success" />
        <Spinner Color="SpinnerColor.Warning" />
        <Spinner Color="SpinnerColor.Danger" />
        <Spinner Color="SpinnerColor.Dark" />
    </div>

    <p><strong>Grow</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Link" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Info" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Success" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Warning" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Danger" Type="SpinnerType.Grow" />
        <Spinner Color="SpinnerColor.Dark" Type="SpinnerType.Grow" />
    </div>

    <p><strong>Dots</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Link" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Info" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Success" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Warning" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Danger" Type="SpinnerType.Dots" />
        <Spinner Color="SpinnerColor.Dark" Type="SpinnerType.Dots" />
    </div>
</div>

Size #

The Spinner component can be displayed in multiple Bulma size classes to suit inline text, cards, panels, or larger loading states.

How to use:

Set the Size property to SpinnerSize.Small, SpinnerSize.Normal, SpinnerSize.Medium, or SpinnerSize.Large to follow the Bulma size scale.
Leave Size unset to use the default spinner size.

This demo shows the supported Bulma size options for the border, grow, and dots spinner types.

Example
View Source

Border

Grow

Dots

<div class="content">
    <p><strong>Border</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" Size="SpinnerSize.Small" />
        <Spinner Color="SpinnerColor.Primary" Size="SpinnerSize.Normal" />
        <Spinner Color="SpinnerColor.Primary" Size="SpinnerSize.Medium" />
        <Spinner Color="SpinnerColor.Primary" Size="SpinnerSize.Large" />
    </div>

    <p><strong>Grow</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Grow" Size="SpinnerSize.Small" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Grow" Size="SpinnerSize.Normal" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Grow" Size="SpinnerSize.Medium" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Grow" Size="SpinnerSize.Large" />
    </div>

    <p><strong>Dots</strong></p>
    <div class="is-flex is-align-items-center is-flex-wrap-wrap" style="gap: 1rem;">
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Dots" Size="SpinnerSize.Small" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Dots" Size="SpinnerSize.Normal" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Dots" Size="SpinnerSize.Medium" />
        <Spinner Color="SpinnerColor.Primary" Type="SpinnerType.Dots" Size="SpinnerSize.Large" />
    </div>
</div>

IsVisible #

The IsVisible property lets you control whether the spinner is rendered, which is useful for toggling loading states from your page logic.

How to use:

Bind the IsVisible property to a boolean field.
Update that field when your loading operation starts or ends.

This demo shows how to show, hide, and toggle a spinner through the IsVisible parameter.

Example
View Source

Current IsVisible: True

<div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 0.75rem;">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ShowSpinner">Show spinner</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="HideSpinner">Hide spinner</Button>
    <Button Size="ButtonSize.Small" @onclick="ToggleSpinner">Toggle</Button>
</div>

<div class="is-flex is-align-items-center" style="gap: 1rem;">
    <Spinner Color="SpinnerColor.Success" IsVisible="@isVisible" />
    <span>Current <code>IsVisible</code>: <strong>@isVisible</strong></span>
</div>

@code {
    private bool isVisible = true;

    private void HideSpinner() => isVisible = false;

    private void ShowSpinner() => isVisible = true;

    private void ToggleSpinner() => isVisible = !isVisible;
}

Methods #

The Spinner component exposes Show() and Hide() methods for instance-based control when you are working with a component reference.

How to use:

Capture the component with @ref.
Call Show() or Hide() on that reference when you want to update visibility imperatively.

This demo shows direct control of a spinner instance through its public methods.

Example
View Source

Control this spinner instance directly through its public methods.

<div class="is-flex is-align-items-center is-flex-wrap-wrap mb-4" style="gap: 0.75rem;">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ShowSpinner">Show()</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="HideSpinner">Hide()</Button>
</div>

<div class="is-flex is-align-items-center" style="gap: 1rem;">
    <Spinner @ref="spinnerRef" Color="SpinnerColor.Danger" Type="SpinnerType.Grow" />
    <span>Control this spinner instance directly through its public methods.</span>
</div>

@code {
    private Spinner? spinnerRef;

    private void HideSpinner() => spinnerRef?.Hide();

    private void ShowSpinner() => spinnerRef?.Show();
}

Spinner