<UserControl x:Class="Update.CustomControl.RoundProcessBarLoading"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="800">
    <Viewbox>
        <Grid Height="800" Width="800">
            <Grid  x:Name="animationGrid"  Visibility="Collapsed">
                <Rectangle Name="Rect1" Height="200" Width="120" Fill="#FFC4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:IsLocked="True"/>
                <Rectangle Name="Rect2" Height="200" Width="120" Fill="#20C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="45"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect3" Height="200" Width="120" Fill="#40C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect4" Height="200" Width="120" Fill="#60C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="135"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect5" Height="200" Width="120" Fill="#80C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="180"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect6" Height="200" Width="120" Fill="#A0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="225"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect7" Height="200" Width="120" Fill="#C0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="270"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Name="Rect8" Height="200" Width="120" Fill="#E0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="315"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Page.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <!--Rect1-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect1" Duration="0:0:1" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>

                                <!--Rect2-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect2" Duration="0:0:0.125" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.125" Storyboard.TargetName="Rect2" Duration="0:0:0.875" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#20C4C4C4"/>

                                <!--Rect3-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect3" Duration="0:0:0.250" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.250" Storyboard.TargetName="Rect3" Duration="0:0:0.750" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#40C4C4C4"/>

                                <!--Rect4-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect4" Duration="0:0:0.375" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.375" Storyboard.TargetName="Rect4" Duration="0:0:0.625" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#60C4C4C4"/>

                                <!--Rect5-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect5" Duration="0:0:0.500" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.500" Storyboard.TargetName="Rect5" Duration="0:0:0.500" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#80C4C4C4"/>

                                <!--Rect6-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect6" Duration="0:0:0.625" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.625" Storyboard.TargetName="Rect6" Duration="0:0:0.375" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#A0C4C4C4"/>

                                <!--Rect7-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect7" Duration="0:0:0.750" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.750" Storyboard.TargetName="Rect7" Duration="0:0:0.250" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#C0C4C4C4"/>

                                <!--Rect8-->
                                <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect8" Duration="0:0:0.875" Storyboard.TargetProperty="Fill.Color" To="#00C4C4C4"/>
                                <ColorAnimation BeginTime="0:0:0.875" Storyboard.TargetName="Rect8" Duration="0:0:0.125" Storyboard.TargetProperty="Fill.Color" From="#FFC4C4C4" To="#E0C4C4C4"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
            </Grid>

            <Grid x:Name="defaultGrid" Visibility="Visible">
                <Rectangle Height="200" Width="120" Fill="#FFC4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:IsLocked="True"/>
                <Rectangle Height="200" Width="120" Fill="#20C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="45"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Height="200" Width="120" Fill="#40C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Height="200" Width="120" Fill="#60C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="135"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle  Height="200" Width="120" Fill="#80C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="180"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Height="200" Width="120" Fill="#A0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="225"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Height="200" Width="120" Fill="#C0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="270"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>

                <Rectangle Height="200" Width="120" Fill="#E0C4C4C4" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="315"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Grid>
        </Grid>
    </Viewbox>

</UserControl>
