Spinner

A loading ring sized like an icon.

An interactive page: C# runs over a Blazor Server connection.

A spinning ring that says something is working. Sized in em like Icon, so it matches the text beside it, and announced to screen readers as Label. Pure CSS: it spins on static pages too.

Usage

razor

<Spinner />  <Spinner Size="IconSize.Xl2" Color="Color.Primary" Label="Loading orders" />

Sizes and color

Use Size on the icon scale and Color for the ring; Label is what screen readers hear.

Preview Code

Preview

Code

Sizes.razor

<Row Gap="6" Align="Align.Center" Wrap Justify="Justify.Center">
    <Spinner Size="IconSize.Sm" />
    <Spinner />
    <Spinner Size="IconSize.Lg" Color="Color.Primary" />
    <Spinner Size="IconSize.Xl2" Color="Color.Primary" Label="Loading orders" />
</Row>

Beside text

Leave Size at its default, 1em, to match the text beside it.

Preview Code

Preview

Syncing 12 files…

Building your report Loading

Code

BesideText.razor

<Stack Gap="3" Align="Align.Center">
    <Row Gap="2" Align="Align.Center">
        <Spinner Color="Color.Primary" />
        <TextBlock As="span" Color="Color.Muted">Syncing 12 files&hellip;</TextBlock>
    </Row>
    <Heading Level="3" Size="TextSize.Xl2">Building your report <Spinner /></Heading>
</Stack>

Mode support

What works in each mode, Spinner
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It has role="status" and visually hidden text, Label (default "Loading"); the ring itself is hidden from screen readers.
With reduced motion it spins more slowly rather than stopping, since the motion says "still working".
For a button that's working, use its Loading, which sets aria-busy, rather than a spinner inside it.

Parameters

Spinner parameters
Prop	Type	Default
`Size`Size, on the same scale as icons (relative to the text).	`IconSize`	`IconSize.Md`
`Color`The ring's color.	`Color?`	`computed`
`Label`What screen readers hear.	`string?`	`"Loading"`

Plus 16 item props and 4 common props.

Full API