How to Create a Silverlight BusyIndicator That is Similar to the YouTube BusyIndicator

Hi all! How about we make a download busy indicator that is the same as the YouTube busy indicator?

[silverlight:, 350, 250]

Well, what have we here? Polygons, which can be in three states, with varying degrees of transparency.

Define a style:

<Style x:Key=”PolygonStyle” TargetType=”Polygon”>

<Setter Property=”Width” Value=”8″ />

<Setter Property=”Height” Value=”8″ />

<Setter Property=”Fill” Value=”White” />

<Setter Property=”RenderTransformOrigin” Value=”0.5, 0.5″ />

<Setter Property=”Opacity” Value=”0.5″ />


To place a polygon in a circle, we apply the transformation to them:

<Polygon x:Name=”item0″ Style=”{StaticResource PolygonStyle}” Points=”0,0, 8,0, 6,7, 2,7″>



<TranslateTransform X=”0″ Y=”-15″ />

<RotateTransform Angle=”0″ />




<Polygon x:Name=”item1″ Style=”{StaticResource PolygonStyle}” Points=”0,0, 8,0, 6,7, 2,7″>



<TranslateTransform X=”0″ Y=”-15″ />

<RotateTransform Angle=”45″ />




To change the state of the polygons, we apply DoubleAnimationUsingKeyFrames to Opacity property.

<Storyboard Duration=”0:0:0.800″ RepeatBehavior=”Forever”>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName=”item0″ Storyboard.TargetProperty=”Opacity”>

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.0″ Value=”1″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.100″ Value=”0.75″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.200″ Value=”0.5″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.700″ Value=”0.75″ />

<DiscreteDoubleKeyFrame KeyTime=”0:0:0.800″ Value=”1″ />



And that’s it! You now have a YouTube-like busy indicator!

Source Code

Looking for quality Silverlight Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , | Posted under 3rd Party Software, Programming/Coding | RSS 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *