For the life of me, I can't seem to find the standard Silverlight loading animation, the one with swirling balls (hmmm ... that just doesn't look/sound right ... anyway) ... is this somewhere in an SDK?
Are there any web sites with busy animations that can be used in Silverlight?
The standard loading screen is actually embedded inside the native Silverlight code, since it is available before the Core CLR loads, and is not actually a ProgressBar template or anything like that.
This means that you will need to embed it into your application, there is no way to directly reference it in XAML or extract it in code.
I did some looking around and was able to find it. The LoadingText named text block can be updated to change the 0% to something useful.
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent='Canvas.Loaded'>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name='LoadingAnimation2' AutoReverse='False' RepeatBehavior='Forever'>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleOne2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.2' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.3' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.8' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleOne2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.2' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.3' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.8' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleTwo2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.5' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.9' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.1' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.6' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleThree2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.7' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.1' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.9' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.4' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFour2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.9' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.3' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.7' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.2' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFive2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.1' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.5' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.5' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.5' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSix2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.3' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.7' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.3' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.8' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSeven2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.5' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.9' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.1' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.6' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleEight2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:01.7' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:02' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.1' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.9' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.4' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleOne2' Storyboard.TargetProperty='(UIElement.Opacity)'>
<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.3' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:00.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.7' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.3' Value='0'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.8' Value='0'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleTwo2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:00.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.4' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.1' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.6' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleTwo2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:00.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.4' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.1' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.6' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleThree2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:01' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.6' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.9' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.4' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleThree2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:01' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.6' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.9' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.4' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFour2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.8' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.7' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.2' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFour2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:02.8' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.7' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08.2' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFive2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.5' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.5' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.5' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleFive2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.5' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.5' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.5' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:08' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSix2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.2' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.3' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.8' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSix2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.2' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.7' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.3' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.6' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.3' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.8' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSeven2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.4' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.1' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.6' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleSeven2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:01.8' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.4' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.4' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.1' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.6' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleEight2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>
<SplineDoubleKeyFrame KeyTime='00:00:02' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.6' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.9' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.4' Value='1'/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='BubbleEight2' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>
<SplineDoubleKeyFrame KeyTime='00:00:02' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:03.6' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.1' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:04.9' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:05.2' Value='1'/>
<SplineDoubleKeyFrame KeyTime='00:00:06.9' Value='3'/>
<SplineDoubleKeyFrame KeyTime='00:00:07.4' Value='1'/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Canvas Width='110' Height='110' >
<Ellipse x:Name='BubbleOne2' Width='10' Height='10' Canvas.Left='78' Canvas.Top='78' Stretch='Fill' RenderTransformOrigin='0.5,0.5'>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleTwo2' Width='10' Height='10' Canvas.Left='90' Canvas.Top='50' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleThree2' Width='10' Height='10' Canvas.Left='78' Canvas.Top='22' Stretch='Fill' RenderTransformOrigin='0.5,0.5'>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleFour2' Width='10' Height='10' Canvas.Left='50' Canvas.Top='10' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleFive2' Width='10' Height='10' Canvas.Left='22' Canvas.Top='22' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleSix2' Width='10' Height='10' Canvas.Left='10' Canvas.Top='50' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleSeven2' Width='10' Height='10' Canvas.Left='22' Canvas.Top='78' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name='BubbleEight2' Width='10' Height='10' Canvas.Left='50' Canvas.Top='90' Stretch='Fill' RenderTransformOrigin='0.5,0.5' >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX='1' ScaleY='1'/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush RadiusX='0.477272' RadiusY='0.477268' Center='0.5,0.5' GradientOrigin='0.5,0.5'>
<GradientStop Color='#990D96D8' Offset='0'/>
<GradientStop Color='#000D96D8' Offset='1'/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
<TextBlock FontFamily='Verdana' FontSize='11' Text='0%' x:Name='LoadingText' HorizontalAlignment='Center' VerticalAlignment='Center'/>
I think this is exactly what you're looking for (ie: the swirly blue balls...hmmm, that's doesn't sound very good either):
First, download the images from this link. Add the "assets" folder to your "ClientBin" folder.
Next, add the following canvas to your XAML
<Canvas x:Name="progressIndicator" Opacity="1" Canvas.Left="480" Canvas.Top="230" Width="50" Height="30">
<Canvas.Resources>
<Storyboard x:Name="loadingIndicator" Duration="00:00:0.03" Completed="loadingIndicator_Completed">
</Storyboard>
</Canvas.Resources>
</Canvas>
Finally, add the following to your XAML code behind
const int TotalImages = 101;
int CurrentImage = 0;
public MainPage()
{
InitializeComponent();
PreLoadImages();
this.loadingIndicator.Begin();
}
public void PreLoadImages()
{
Image img = new Image();
img.Name = "ll_0";
img.Opacity = 1;
img.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("/assets/images/loader_loop_00000.png", UriKind.Relative));
progressIndicator.Children.Add(img);
for(int i = 1;i <= TotalImages;i++) {
img = new Image();
img.Name = "ll_" + i.ToString();
img.Opacity = 0;
img.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("/assets/images/loader_loop_00" + i.ToString("000") + ".png", UriKind.Relative));
img.Width = 30;
img.Height = 30;
progressIndicator.Children.Add(img);
}
}
private void loadingIndicator_Completed(object sender, EventArgs e)
{
Image currentImage = (Image)FindName("ll_" + CurrentImage.ToString());
currentImage.Opacity = 0;
CurrentImage++;
if (CurrentImage >= TotalImages) {
CurrentImage = 0;
}
currentImage = (Image)FindName("ll_" + CurrentImage.ToString());
currentImage.Opacity = 1;
loadingIndicator.Begin();
}