<Border xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="Exodus.Controls.ThreeDotAnimation"
        Width="18" Background="Transparent">
    <Grid HorizontalAlignment="Stretch"
          ColumnDefinitions="*, *, *">
        <Viewbox Grid.Column="0" Width="3.25"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
            <Path
                Data="{StaticResource CircleDot}"
                Fill="White"
                Stretch="Uniform" />

            <Viewbox.Styles>
                <Style Selector="Viewbox">
                    <Style.Animations>
                        <Animation Duration="0:0:2" Delay="0:0:1" IterationCount="Infinite">
                            <KeyFrame Cue="0%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                            <KeyFrame Cue="50%">
                                <Setter Property="Opacity" Value="0.35" />
                                <Setter Property="ScaleTransform.ScaleX" Value="0.935" />
                                <Setter Property="ScaleTransform.ScaleY" Value="0.935" />
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Viewbox.Styles>
        </Viewbox>
        <Viewbox Grid.Column="1" Width="3.25"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
            <Path
                Data="{StaticResource CircleDot}"
                Fill="White"
                Stretch="Uniform" />

            <Viewbox.Styles>
                <Style Selector="Viewbox">
                    <Style.Animations>
                        <Animation Duration="0:0:2" Delay="0:0:1.5" IterationCount="Infinite">
                            <KeyFrame Cue="0%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                            <KeyFrame Cue="50%">
                                <Setter Property="Opacity" Value="0.35" />
                                <Setter Property="ScaleTransform.ScaleX" Value="0.935" />
                                <Setter Property="ScaleTransform.ScaleY" Value="0.935" />
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Viewbox.Styles>
        </Viewbox>
        <Viewbox Grid.Column="2" Width="3.25"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
            <Path
                Data="{StaticResource CircleDot}"
                Fill="White"
                Stretch="Uniform" />

            <Viewbox.Styles>
                <Style Selector="Viewbox">
                    <Style.Animations>
                        <Animation Duration="0:0:2" IterationCount="Infinite">
                            <KeyFrame Cue="0%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                            <KeyFrame Cue="50%">
                                <Setter Property="Opacity" Value="0.35" />
                                <Setter Property="ScaleTransform.ScaleX" Value="0.935" />
                                <Setter Property="ScaleTransform.ScaleY" Value="0.935" />
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="Opacity" Value="0.85" />
                                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                                <Setter Property="ScaleTransform.ScaleY" Value="1" />
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Viewbox.Styles>
        </Viewbox>
    </Grid>
</Border>