Blazor Sidebar

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

Parameters

Name	Type	Default	Required	Description	Added Version
Color	SpinnerColor	SpinnerColor.None		Gets or sets the color of the spinner.	2.0.0
Size	SpinnerSize	SpinnerSize.Medium		Gets or sets the size of the spinner.	2.0.0
Title	string?	null		Gets or sets the title text used as an accessibility attribute.	2.0.0
Type	SpinnerType	SpinnerType.Border		Gets or sets the type of the spinner.	2.0.0
Visible	bool	true		Gets or sets whether the spinner is visible or not.	2.0.0
VisuallyHiddenText	string?	Loading...		Gets or sets the visually hidden text.	2.0.0

Examples

Border spinner

Use the border spinners for a lightweight loading indicator.

<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.

<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!

<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.

<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

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

See demo here.

Placement

Flex

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

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

See demo here.

Floats

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

See demo here.

Text align

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

See demo here.

Size

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

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

<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

<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.