Blazor Spinner

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="ButtonSize.Small" @onclick="Hide">Hide</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.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
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.2.0.
  • Powered by .NET 9.0.0
Links
Guides
Community