GitHub

Progress

PreviousNext

GPUI Kit's progress bar, determinate and indeterminate, as Avalonia's ProgressBar.

Full
InteractiveProgress demo
<ProgressBar Value="40" Width="240" HorizontalAlignment="Left" />

Usage

The theme covers ProgressBar in full: a bar in the progress color over the same color at 20%, with half its height as the radius. A change of Value animates the bar's width over 180ms on GPUI Kit's move easing. IsIndeterminate="True" repeats GPUI Kit's one-second sweep: the bar's leading edge runs across in the second, and its trailing edge follows in the second half, both ends rounded. Sizes: xsmall (4px), small (6px), large (10px); medium (8px) needs no class.

Examples

The four heights.

Sizes
InteractiveProgress demo: Sizes
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <ProgressBar Classes="xsmall" Value="40" />
  <ProgressBar Classes="small" Value="40" />
  <ProgressBar Value="40" />
  <ProgressBar Classes="large" Value="40" />
</StackPanel>

IsIndeterminate="True" repeats the sweep.

Indeterminate
InteractiveProgress demo: Indeterminate
<ProgressBar IsIndeterminate="True" Width="240" HorizontalAlignment="Left" />

Not covered

  • Custom colors (color()); set Foreground directly.