Free Silverlight and WPF loading spinners

4 Comments | | November 26th, 2009

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>

Update

Several people have requested a WPF version, so I created a WPF project and added it below :)

Download files:

4 Responses to “Free Silverlight and WPF loading spinners”

  1. Wow, this is really awesome. I particularly like the spinning gears, and the flipping squares? Nice job!

    Khalil Muhammad
    03 Mar 10 11:24

  2. [...] Also as a related point, with this release we've update all the build-in container templates, they now match the Silverlight's standard way of templating content controls. Another changes is that the template now shows an overlay with an animated indicator whilst navigating (it uses a spinning indicator by Felix Corke). [...]

    nRoute: Now, More Wholesome
    04 Jul 10 11:46

  3. Excellent work, can I provide a WPF version? Also if you group the canvas into a ViewBox you can size the spinners.

    Thanks for sharing.

    Normski
    30 Jul 10 08:12

  4. WPF project added. Also Normski, rather than using a viewbox, I’d recommend using a scale transform, it’s more efficient. Cheers!

    felix
    30 Jul 10 10:08

Leave a Reply