StabilityMatrix/StabilityMatrix.Avalonia/Styles/ProgressRing.axaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
        xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
        x:CompileBindings="True">

  <Design.PreviewWith>
    <StackPanel>
      <Border Padding="20">
        <controls:ProgressRing StartAngle="90" EndAngle="270" Value="50" Foreground="Red" BorderThickness="5" Width="100" Height="100" />
      </Border>
      <Border Padding="20">
        <controls:ProgressRing IsIndeterminate="True" BorderThickness="10" Width="100" Height="100" />
      </Border>
    </StackPanel>
  </Design.PreviewWith>

  <Styles.Resources>
    <converters:FitSquarelyWithinAspectRatioConverter x:Key="FitSquarelyWithinAspectRatioConverter"/>
  </Styles.Resources>

  <Style Selector="controls|ProgressRing">
    <Setter Property="Foreground" Value="{DynamicResource SystemAccentColor}"/>
    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}" />
    <Setter Property="BorderThickness" Value="9" />
    <Setter Property="MinHeight" Value="16" />
    <Setter Property="MinWidth" Value="16" />
    <Setter Property="Template">
      <ControlTemplate>
        <Panel x:Name="FluentRingRoot">
          <Ellipse x:Name="Track"
                   Stroke="{TemplateBinding Background}"
                   StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
          <Arc x:Name="Fill"
               Stroke="{TemplateBinding Foreground}"
               StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource Mode=TemplatedParent}}"
               StrokeLineCap="Round" />
        </Panel>
      </ControlTemplate>
    </Setter>
  </Style>

  <Style Selector="controls|ProgressRing:not(:indeterminate) /template/ Arc#Fill">
    <Setter Property="StartAngle" Value="{Binding StartAngle, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
    <Setter Property="SweepAngle" Value="{Binding ValueAngle, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
  </Style>

  <Style Selector="controls|ProgressRing:preserveaspect">
    <Setter Property="MinWidth" Value="32" />
    <Setter Property="MinHeight" Value="32" />
  </Style>

  <Style Selector="controls|ProgressRing:preserveaspect /template/ Panel#FluentRingRoot">
    <Setter Property="Width" Value="{TemplateBinding Bounds, Converter={StaticResource FitSquarelyWithinAspectRatioConverter}}"/>
    <Setter Property="Height" Value="{Binding Width, RelativeSource={RelativeSource Mode=Self}}"/>
  </Style>

  <Style Selector="controls|ProgressRing[IsEnabled=True]:indeterminate /template/ Arc#Fill">
    <Style.Animations>
      <Animation Duration="0:0:5" Easing="LinearEasing" IterationCount="INFINITE" FillMode="Both">
        <KeyFrame Cue="0%">
          <Setter Property="StartAngle" Value="-720"/>
          <Setter Property="SweepAngle" Value="0"/>
        </KeyFrame>
        <KeyFrame Cue="12.5%">
          <Setter Property="StartAngle" Value="-540"/>
          <Setter Property="SweepAngle" Value="50"/>
        </KeyFrame>
        <KeyFrame Cue="25%">
          <Setter Property="StartAngle" Value="-360"/>
          <Setter Property="SweepAngle" Value="100"/>
        </KeyFrame>
        <KeyFrame Cue="32.5%">
          <Setter Property="StartAngle" Value="-180"/>
          <Setter Property="SweepAngle" Value="50"/>
        </KeyFrame>
        <KeyFrame Cue="50%">
          <Setter Property="StartAngle" Value="0"/>
          <Setter Property="SweepAngle" Value="5"/>
        </KeyFrame>
        <KeyFrame Cue="62.5%">
          <Setter Property="StartAngle" Value="180"/>
          <Setter Property="SweepAngle" Value="50"/>
        </KeyFrame>
        <KeyFrame Cue="75%">
          <Setter Property="StartAngle" Value="360"/>
          <Setter Property="SweepAngle" Value="100"/>
        </KeyFrame>
        <KeyFrame Cue="87.5%">
          <Setter Property="StartAngle" Value="540"/>
          <Setter Property="SweepAngle" Value="50"/>
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="StartAngle" Value="720"/>
          <Setter Property="SweepAngle" Value="0"/>
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>

  <Style Selector="controls|ProgressRing[IsEnabled=True] /template/ Ellipse#Track">
    <Style.Animations>
      <Animation Duration="0:0:1" IterationCount="INFINITE">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.99"/>
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="1"/>
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
</Styles>