xaml loading spinner animation

spinner.xaml

<Grid
    xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:system = "clr-namespace:System;assembly=mscorlib"
    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
    <Grid.Resources>
        <!-- Particle Styling -->
        <SolidColorBrush x:Key = "ParticleColor" Color = "#7E0950D1"/>
        <SolidColorBrush x:Key = "ParticleBackgroundColor" Color = "Transparent"/>
        <system:Double x:Key = "ParticleOpacity">1</system:Double>
        <system:Double x:Key = "ParticleRadius">5</system:Double>
        
        <system:Double x:Key = "StartingPointX">0</system:Double>
        <system:Double x:Key = "StartingPointY">-20</system:Double>
        
        <system:Double x:Key = "RotationPointX">0.5</system:Double>
        <system:Double x:Key = "RotationPointY">0.5</system:Double>       
        
        <!-- Particle Origin Angles -->
        <system:Double x:Key = "ParticleOriginAngleP0">0</system:Double>
        <system:Double x:Key = "ParticleOriginAngleP1">-10</system:Double>
        <system:Double x:Key = "ParticleOriginAngleP2">-20</system:Double>
        <system:Double x:Key = "ParticleOriginAngleP3">-30</system:Double>
        <system:Double x:Key = "ParticleOriginAngleP4">-40</system:Double>
        
        <!-- Particle Position & Timing 1 -->
        <system:Double x:Key = "ParticleBeginAngle1">0</system:Double>
        <system:Double x:Key = "ParticleEndAngle1">90</system:Double>
        
        <!-- Particle Position & Timing 2 -->
        <system:Double x:Key = "ParticleBeginAngle2">90</system:Double>
        <system:Double x:Key = "ParticleEndAngle2">270</system:Double>
        
        <!-- Particle Position & Timing 3 -->
        <system:Double x:Key = "ParticleBeginAngle3">270</system:Double>
        <system:Double x:Key = "ParticleEndAngle3">360</system:Double>
        
        <Style x:Key = "EllipseStyle" TargetType = "Ellipse">
            <Setter Property = "Width" Value = "{StaticResource ParticleRadius}"/>
            <Setter Property = "Height" Value = "{StaticResource ParticleRadius}"/>
            <Setter Property = "Fill" Value = "{StaticResource ParticleColor}"/>
            <Setter Property = "RenderTransformOrigin" Value = "0.5, 0.5"/>
            <Setter Property = "Opacity" Value = "{StaticResource ParticleOpacity}"/>
        </Style>
    </Grid.Resources>
    <Canvas Width = "50" Height = "50">
        <Canvas.Triggers>
            <EventTrigger RoutedEvent = "Canvas.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard
                            BeginTime = "00:00:00.000"
                            Duration = "00:00:01.800"
                            RepeatBehavior = "Forever">
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetName = "p0"
                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.000" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:00.750" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.050" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.800" Value="360"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard
                            BeginTime = "00:00:00.100"
                            Duration = "00:00:01.800"
                            RepeatBehavior = "Forever">
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetName = "p1"
                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.000" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:00.750" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.050" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.800" Value="360"/>
                            </DoubleAnimationUsingKeyFrames>                        
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard
                            BeginTime = "00:00:00.200"
                            Duration = "00:00:01.800"
                            RepeatBehavior = "Forever">
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetName = "p2"
                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.000" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:00.750" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.050" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.800" Value="360"/>
                            </DoubleAnimationUsingKeyFrames>                        
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard
                            BeginTime = "00:00:00.300"
                            Duration = "00:00:01.800"
                            RepeatBehavior = "Forever">
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetName = "p3"
                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.000" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:00.750" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.050" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.800" Value="360"/>
                            </DoubleAnimationUsingKeyFrames>                        
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard
                            BeginTime = "00:00:00.400"
                            Duration = "00:00:01.800"
                            RepeatBehavior = "Forever">
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetName = "p4"
                                Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.000" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:00.750" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.050" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="00:00:01.800" Value="360"/>
                            </DoubleAnimationUsingKeyFrames>                        
                        </Storyboard>
                    </BeginStoryboard>                    
                </EventTrigger.Actions>
            </EventTrigger>
        </Canvas.Triggers>
        <Border
            x:Name = "p0"
            Background = "{StaticResource ParticleBackgroundColor}"
            Opacity = "{StaticResource ParticleOpacity}">
            <Border.RenderTransform>
                <RotateTransform/>
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/>
            </Border.RenderTransformOrigin>
            <Ellipse Style = "{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/>
                        <RotateTransform Angle = "{StaticResource ParticleOriginAngleP0}"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
        <Border
            x:Name = "p1"
            Background = "{StaticResource ParticleBackgroundColor}"
            Opacity = "{StaticResource ParticleOpacity}">
            <Border.RenderTransform>
                <RotateTransform/>
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/>
            </Border.RenderTransformOrigin>
            <Ellipse Style = "{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/>
                        <RotateTransform Angle = "{StaticResource ParticleOriginAngleP1}"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
        <Border
            x:Name = "p2"
            Background = "{StaticResource ParticleBackgroundColor}"
            Opacity = "{StaticResource ParticleOpacity}">
            <Border.RenderTransform>
                <RotateTransform/>
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/>
            </Border.RenderTransformOrigin>
            <Ellipse Style = "{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/>
                        <RotateTransform Angle = "{StaticResource ParticleOriginAngleP2}"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
        <Border
            x:Name = "p3"
            Background = "{StaticResource ParticleBackgroundColor}"
            Opacity = "{StaticResource ParticleOpacity}">
            <Border.RenderTransform>
                <RotateTransform/>
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/>
            </Border.RenderTransformOrigin>
            <Ellipse Style = "{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/>
                        <RotateTransform Angle = "{StaticResource ParticleOriginAngleP3}"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
        <Border
            x:Name = "p4"
            Background = "{StaticResource ParticleBackgroundColor}"
            Opacity = "{StaticResource ParticleOpacity}">
            <Border.RenderTransform>
                <RotateTransform/>
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/>
            </Border.RenderTransformOrigin>
            <Ellipse Style = "{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/>
                        <RotateTransform Angle = "{StaticResource ParticleOriginAngleP4}"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
    </Canvas>
</Grid>