RzSpinner

The RzSpinner component provides a visual indicator for loading or processing states. It renders an SVG animation that is styled according to the current theme, supporting various sizes and semantic colors.

Default Spinner

The default spinner uses the medium size and the theme's 'OnSurface' color.

Source

<RzSpinner />

Spinner Sizes

Spinners are available in multiple sizes using the `Size` parameter.

Source

<RzSpinner Size="Size.ExtraSmall" />
<RzSpinner Size="Size.Small" />
<RzSpinner Size="Size.Medium" />
<RzSpinner Size="Size.Large" />
<RzSpinner Size="Size.ExtraLarge" />

Spinner Colors

Customize the spinner's color using the `Color` parameter with semantic color options.

Source

<RzSpinner Color="SemanticColor.Primary" />
<RzSpinner Color="SemanticColor.Secondary" />
<RzSpinner Color="SemanticColor.Success" />
<RzSpinner Color="SemanticColor.Info" />
<RzSpinner Color="SemanticColor.Warning" />
<RzSpinner Color="SemanticColor.Danger" />
<RzSpinner Color="SemanticColor.OnSurfaceStrong" />

RzSpinner Component Parameters

Property	Description
Size	Size – Specifies the size of the spinner. Options: `ExtraSmall`, `Small`, `Medium`, `Large`, `ExtraLarge`. (Default: `Medium`)
Color	SemanticColor – Determines the fill color of the spinner. Defaults to `None`, which uses the theme's default 'OnSurface' color. Options include `Primary`, `Secondary`, `Success`, `Info`, `Warning`, `Danger`, etc.
AriaLabel	string? – Sets the accessible label for the spinner, announced by screen readers. Defaults to a localized "Loading...". It's recommended to provide a more specific label indicating what is loading (e.g., "Loading user data...").