Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Spinner

Full

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

ExampleInteractive
Spinner — Avalonia UIKit
Spinner demo
<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
Spinner demo: Sizes
<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
Spinner demo: Inline
<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>

Not covered

  • Changing the icon, the speed or the easing.