We can create the ProgressBar style in silverlight.we can make animation for progressbar.
Step 1: Create progressbar style in silverlight,we use the Path for designing the progressbar in Silverlight.
<Path x:Name="p1" Data="M31.841005,0.91992986 L0.99700367,1.0039299 M0.99700308,0.5 L0.99700308,35.167 M0.5,35.211964 L27.365,34.961964" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.712" Margin="41.826,0,0,32.375" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="32.341"/>
<Path x:Name="p2" Data="M17.489609,0.5 L0.90660876,26.833 M0.5,26.711184 L28.992409,44.526543 M28.920765,45.149155 L43.9277,21.397367" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.649" Margin="59.136,0,0,19.766" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.428" RenderTransformOrigin="0.207035454459477,0.299381056904622">
<Path.RenderTransform>
<CompositeTransform Rotation="-1.953"/>
</Path.RenderTransform>
</Path>
<Path x:Name="p3" Data="M0.5,13.620011 L15.875,40.745014 M15.582001,41.208 L45.166,23.250002 M45.33799,23.708 L30.962992,0.50000018" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="41.708" Margin="77.87,0,0,38.625" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.838"/>
<Path x:Name="p4" Data="M0.5,34.729992 L31.291998,34.687992 M30.839996,35.104 L30.715998,0.50000131 M31.215004,1.1250029 L3.9030046,0.50000286" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.604" Margin="78.16,0,0,67.959" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="31.792"/>
<Path x:Name="p5" Data="M27.667776,44.807255 L43.417778,17.869255 M43.913776,17.995205 L14.373775,0.8912034 M14.711559,0.50000089 L0.50000042,25.070505" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.307" Margin="47.872,0,0,70.168" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.414"/>
<Path x:Name="p6" Data="M44.835003,27.916033 L29.168001,0.83203191 M29.500002,0.5 L0.5,18.084 M0.5000006,17.687012 L14.158,42.687012" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="43.187" Margin="28.665,0,0,53.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.335" />
Step 2: Use above path design in progressbar style as below.
<Style TargetType="ProgressBar" x:Key="pStyle">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="IsIndeterminate" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Determinate"/>
<vsm:VisualState x:Name="Indeterminate">
<Storyboard x:Name="borsoryboard" AutoReverse="True" RepeatBehavior="forever" BeginTime="0:0:0.10" Duration="0:0:2.4" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="eclispse" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.35" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.67" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p1" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.45" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.25" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.35" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p2" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.30" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.41" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.50" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.61" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p3" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.45" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.56" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.65" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.76" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p4" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.60" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.71" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.80" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.91" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p5" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.75" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:0.86" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.95" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:2.06" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="p6" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.80" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:1.99" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:2.110" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:2.0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid >
<Ellipse Opacity="0" x:Name="eclispse" Fill="Green" HorizontalAlignment="Left" Height="6" Margin="73,0,0,65" Stroke="Black" VerticalAlignment="Bottom" Width="6" RenderTransformOrigin="0.6,-0.167"/>
<Path x:Name="p1" Data="M31.841005,0.91992986 L0.99700367,1.0039299 M0.99700308,0.5 L0.99700308,35.167 M0.5,35.211964 L27.365,34.961964" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.712" Margin="41.826,0,0,32.375" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="32.341"/>
<Path x:Name="p2" Data="M17.489609,0.5 L0.90660876,26.833 M0.5,26.711184 L28.992409,44.526543 M28.920765,45.149155 L43.9277,21.397367" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.649" Margin="59.136,0,0,19.766" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.428" RenderTransformOrigin="0.207035454459477,0.299381056904622">
<Path.RenderTransform>
<CompositeTransform Rotation="-1.953"/>
</Path.RenderTransform>
</Path>
<Path x:Name="p3" Data="M0.5,13.620011 L15.875,40.745014 M15.582001,41.208 L45.166,23.250002 M45.33799,23.708 L30.962992,0.50000018" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="41.708" Margin="77.87,0,0,38.625" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.838"/>
<Path x:Name="p4" Data="M0.5,34.729992 L31.291998,34.687992 M30.839996,35.104 L30.715998,0.50000131 M31.215004,1.1250029 L3.9030046,0.50000286" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="35.604" Margin="78.16,0,0,67.959" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="31.792"/>
<Path x:Name="p5" Data="M27.667776,44.807255 L43.417778,17.869255 M43.913776,17.995205 L14.373775,0.8912034 M14.711559,0.50000089 L0.50000042,25.070505" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="45.307" Margin="47.872,0,0,70.168" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="44.414"/>
<Path x:Name="p6" Data="M44.835003,27.916033 L29.168001,0.83203191 M29.500002,0.5 L0.5,18.084 M0.5000006,17.687012 L14.158,42.687012" Fill="{TemplateBinding Background}" HorizontalAlignment="Left" Height="43.187" Margin="28.665,0,0,53.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="45.335" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Step 3: OutPut look like as below.
![sil.gif]()