Blazor Spinners

Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component.

Border spinner#

Use the border spinners for a lightweight loading indicator.
razor 
<Spinner />

Colors#

The border spinner's border color inherits the element's color (currentColor). This means you can easily customize the spinner's color by changing the Color parameter on the standard spinner.
razor 
<Spinner Color="SpinnerColor.Primary" />
<Spinner Color="SpinnerColor.Secondary" />
<Spinner Color="SpinnerColor.Success" />
<Spinner Color="SpinnerColor.Danger" />
<Spinner Color="SpinnerColor.Warning" />
<Spinner Color="SpinnerColor.Info" />
<Spinner Color="SpinnerColor.Light" />
<Spinner Color="SpinnerColor.Dark" />

Grow spinner#

If you don't fancy a border spinner, switch to the grow spinner, while it doesn't technically spin, it does repeatedly grow!
razor 
<Spinner Type="SpinnerType.Grow" />
razor 
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Primary" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Secondary" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Success" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Danger" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Warning" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Info" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Light" />
<Spinner Type="SpinnerType.Grow" Color="SpinnerColor.Dark" />

Loading dots spinner#

The loading dots are a special indicator for a lightweight loading indicator.
razor 
<Spinner Type="SpinnerType.Dots" />
razor 
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Primary" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Secondary" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Success" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Danger" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Warning" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Info" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Light" />
<Spinner Type="SpinnerType.Dots" Class="me-3" Color="SpinnerColor.Dark" />

Alignment#

Margin#

razor 
<Spinner Type="SpinnerType.Border" Class="m-5" />

Placement#

Flex#

razor 
<div class="d-flex justify-content-center">
    <Spinner Type="SpinnerType.Border" />
</div>
Loading...
razor 
<div class="d-flex justify-content-center">
    <strong role="status">Loading...</strong>
    <Spinner Type="SpinnerType.Border" Class="ms-auto" />
</div>

Floats#

razor 
<div class="clearfix">
    <Spinner Type="SpinnerType.Border" Class="float-end" />
</div>

Text align#

razor 
<div class="text-center">
    <Spinner Type="SpinnerType.Border" />
</div>

Size#

razor 
<Spinner Type="SpinnerType.Border" Size="SpinnerSize.Small" />
<Spinner Type="SpinnerType.Border" />
<Spinner Type="SpinnerType.Border" Size="SpinnerSize.Large" />
<Spinner Type="SpinnerType.Border" Size="SpinnerSize.ExtraLarge" />
razor 
<Spinner Type="SpinnerType.Grow" Size="SpinnerSize.Small" />
<Spinner Type="SpinnerType.Grow" />
<Spinner Type="SpinnerType.Grow" Size="SpinnerSize.Large" />
<Spinner Type="SpinnerType.Grow" Size="SpinnerSize.ExtraLarge" />
razor 
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Size="SpinnerSize.Small" />
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Secondary" />
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Success" Size="SpinnerSize.Large" />
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Danger" Size="SpinnerSize.ExtraLarge" />

Visible#

razor 
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />

<div class="b-block mt-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="Hide">Hide</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="Show">Show</Button>
</div>

@code {
    private bool visible = true;

    private void Hide() => visible = false;

    private void Show() => visible = true;
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community