Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the color theme of the site and its live demos.

T

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Spinner

A turning loader icon, as a ProgressBar with a named theme.

ExampleInteractive
Spinner — Avalonia UIKit
Live demo unavailable
<ProgressBar Theme="{StaticResource UIKitSpinner}" />

Usage

ProgressBar Theme="{StaticResource UIKitSpinner}" draws a loader icon turning once every 0.8 seconds, with an ease-in-out on each turn. The theme sets IsIndeterminate itself, and the icon takes Foreground, the text color by default. Sizes: xsmall (12px), small (14px), large (24px); medium (16px) needs no class.

Examples

The four sizes.

SizesInteractive
Live demo unavailable
<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="xsmall" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="large" VerticalAlignment="Center" />
</StackPanel>

A spinner beside text, one in the muted color, and one inside a disabled button in the button's foreground.

InlineInteractive
Live demo unavailable
<StackPanel Spacing="12" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="8">
    <ProgressBar Theme="{StaticResource UIKitSpinner}" VerticalAlignment="Center" />
    <TextBlock Text="Loading…" VerticalAlignment="Center" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" Spacing="8">
    <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" Foreground="{DynamicResource UIKit.MutedForeground}" VerticalAlignment="Center" />
    <TextBlock Text="Syncing 3 files" Foreground="{DynamicResource UIKit.MutedForeground}" VerticalAlignment="Center" />
  </StackPanel>
  <Button Classes="primary" IsEnabled="False" HorizontalAlignment="Left">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <ProgressBar Theme="{StaticResource UIKitSpinner}" Classes="small" Foreground="{DynamicResource UIKit.PrimaryForeground}" VerticalAlignment="Center" />
      <TextBlock Text="Please wait" VerticalAlignment="Center" />
    </StackPanel>
  </Button>
</StackPanel>

uikit:Spinners.Icon replaces the loader with another icon geometry, here UIKit.Icon.LoaderCircle, plain and in cyan.

IconInteractive
Live demo unavailable
<StackPanel Orientation="Horizontal" Spacing="8">
  <ProgressBar Theme="{StaticResource UIKitSpinner}" uikit:Spinners.Icon="{StaticResource UIKit.Icon.LoaderCircle}" />
  <ProgressBar Theme="{StaticResource UIKitSpinner}" uikit:Spinners.Icon="{StaticResource UIKit.Icon.LoaderCircle}"
               Foreground="{DynamicResource UIKit.Cyan}" />
</StackPanel>