Free Silverlight and WPF loading spinners

Here’s some free spinners I’ve been making with Blend and Illustrator that you can use as indeterminate loaders for Silverlight or any WPF app, all that needs changing to suit is the storyboard trigger. Enjoy!

Click to see sample XAML code of DotCircle:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
	x:Class="xamlSpinners.ucSpinner_1">

	<UserControl.Resources>
		<Storyboard x:Name="spinner" RepeatBehavior="ForEver" BeginTime="00:00:00">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse01" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse12" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse11" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse02" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse03" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse04" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse05" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse06" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse07" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse08" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse09" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.25"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse10" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0.25"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<Canvas x:Name="spinner_1" HorizontalAlignment="Center" Width="24" Height="24">
		<i:Interaction.Triggers>
			<i:EventTrigger EventName="Loaded">
				<im:ControlStoryboardAction Storyboard="{StaticResource spinner}"/>
			</i:EventTrigger>
		</i:Interaction.Triggers>
		<Ellipse x:Name="ellipse01" Fill="White" Height="4" Width="4" Canvas.Top="10" Opacity="0" />
		<Ellipse x:Name="ellipse02" Fill="White" Height="4" Width="4" Canvas.Top="5" Opacity="0" Canvas.Left="1.33975" />
		<Ellipse x:Name="ellipse03" Fill="White" Height="4" Width="4" Canvas.Top="1.4"  Opacity="0" Canvas.Left="5"/>
		<Ellipse x:Name="ellipse04" Fill="White" Height="4" Width="4" Canvas.Top="0"  Opacity="0" Canvas.Left="10"/>
		<Ellipse x:Name="ellipse05" Fill="White" Height="4" Width="4" Canvas.Top="1.4"  Opacity="0" Canvas.Left="15"/>
		<Ellipse x:Name="ellipse06" Fill="White" Height="4" Width="4" Canvas.Top="5"  Opacity="0" Canvas.Left="18.6603"/>
		<Ellipse x:Name="ellipse07" Fill="White" Height="4" Width="4" Canvas.Top="10" Canvas.Left="20" Opacity="0" />
		<Ellipse x:Name="ellipse08" Fill="White" Height="4" Width="4" Canvas.Top="15" Canvas.Left="18.7" Opacity="0" />
		<Ellipse x:Name="ellipse09" Fill="White" Height="4" Width="4" Canvas.Top="18.66025" Canvas.Left="15" Opacity="0"/>
		<Ellipse x:Name="ellipse10" Fill="White" Height="4" Width="4" Canvas.Top="20" Canvas.Left="10" Opacity="0"/>
		<Ellipse x:Name="ellipse11" Fill="White" Height="4" Width="4" Canvas.Top="18.66025" Canvas.Left="5" Opacity="0"/>
		<Ellipse x:Name="ellipse12" Fill="White" Height="4" Width="4" Canvas.Top="15" Canvas.Left="1.4" Opacity="0"/>

		<Grid x:Name="LayoutRoot" Height="24" Width="24"/>
	</Canvas>
</UserControl>

Download files:

• FreeXamlSpinners.zip