Spinner

Spinner Component

The Spinner component is used to indicate a loading state of a UI element or page.

Inheritance

Spinner : ColoredBootstrapComponentBase

Parameters

Name	Type	Description
ContentAlignment	ContentAlignment?	Specifies how to align child content in your spinner.
Size	SpinnerSize	The size of the spinner. Defaults to SpinnerSize.Normal.
Type	SpinnerType	The type of spinner. Defaults to SpinnerType.Border.

Inheritance

The Spinner component extends the ColoredBootstrapComponentBase base class, so all parameters defined on that class are also available on the Spinner component, like the Color property.

Examples

Size and type

Shows you how you can create spinners with different sizes and types.

<Spinner Size="SpinnerSize.Normal" Type="SpinnerType.Border" />
<Spinner Size="SpinnerSize.Normal" Type="SpinnerType.Grow" />

<Spinner Size="SpinnerSize.Small" Type="SpinnerType.Border" />
<Spinner Size="SpinnerSize.Small" Type="SpinnerType.Grow" />

Colours

You can use the standard Bootstrap colours with your spinners.

<Spinner Color="NamedColor.Primary" />
<Spinner Color="NamedColor.Secondary" />
<Spinner Color="NamedColor.Success" />
<Spinner Color="NamedColor.Danger" />
<Spinner Color="NamedColor.Warning" />
<Spinner Color="NamedColor.Info" />
<Spinner Color="NamedColor.Light" />
<Spinner Color="NamedColor.Dark" />

Working with content

Shows you how to add content to your spinner.

<Spinner ContentAlignment="ContentAlignment.Left">
    Loading... (left aligned)
</Spinner>
<Spinner ContentAlignment="ContentAlignment.Right">
    Loading... (right aligned)
</Spinner>

With buttons

Shows how to use the spinner inside of a Button component.

@code {
    bool saving;
}

<Button
    Color="NamedColor.Primary"
    IsDisabled="@this.saving"
    OnClicked="() => this.saving = true">
    @if(this.saving)
    {
        <Spinner
            Size="SpinnerSize.Small"
            MarginRight="Spacing.One" />
    }
    <span>Save</span>
</Button>