Home Original page

Blazor Spinner Component | Blazor Bootstrap Docs

Blazor Sidebar

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

Blazor Spinner Component

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
ColorSpinnerColorSpinnerColor.NoneGets or sets the color of the spinner.2.0.0
SizeSpinnerSizeSpinnerSize.MediumGets or sets the size of the spinner.2.0.0
Titlestring?nullGets or sets the title text used as an accessibility attribute.2.0.0
TypeSpinnerTypeSpinnerType.BorderGets or sets the type of the spinner.2.0.0
VisiblebooltrueGets or sets whether the spinner is visible or not.2.0.0
VisuallyHiddenTextstring?Loading...Gets or sets the visually hidden text.2.0.0

Examples​

Border spinner​

Use the border spinners for a lightweight loading indicator.

Blazor Spinner Component - Border spinner

See demo here.

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.

Blazor Spinner Component - Colors

<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" />

See demo here.

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!

Blazor Spinner Component - Grow spinner

<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" />

See demo here.

Loading dots spinner​

The loading dots are a special indicator for a lightweight loading indicator.

Blazor Spinner Component - Loading dots spinner

<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" />

See demo here.

Alignment​

Margin​

Blazor Spinner Component - Margin

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

See demo here.

Placement​

Flex​

Blazor Spinner Component - Flex - Example 1

<div class="d-flex justify-content-center">
    <Spinner Type="SpinnerType.Border" />
</div>

Blazor Spinner Component - Flex - Example 2

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

See demo here.

Floats​

Blazor Spinner Component - Floats

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

See demo here.

Text align​

Blazor Spinner Component - Text align

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

See demo here.

Size​

Blazor Spinner Component - Size - Example 1

<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" />

Blazor Spinner Component - Size - Example 2

<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" />

Blazor Spinner Component - Size - Example 3

<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" />

See demo here.

Visible​

Blazor Spinner Component - Visible

<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;
}

See demo here.