Silverlight

Simple Ajax Style Loading Animation in Silverlight

I had the need a while back for a spinny loading animation thingy – they seem to be the industry standard “ajaxy load” animation of choice, so I figured I would wack one in my Silverlight application.

I had a bit of a hunt around and to my astonishment there weren’t many around. My searches returned a couple if simple spinny animations where the entire thing spins (i.e. a rotation transform… but I wanted one where each element lights up in turn.

So I got to thinking (which can be dangerous). I decided to jump in to my latest playground – Expression Design – and see what I could come up with. I started with an ellipse object. This would form the “wheel” that the animation would follow. Next I used the text along path feature to draw a series of pipe (“|”) characters around the circle. With some font size and baseline adjustments I had the pipes lining up in to a nice little circle. See the .design file in the download sample. It’s really easy!

SpinnyWheelDesign

Next I exported the design as XAML (with the option to convert text to paths).

In Blend, I pulled out the original Ellipse (the wheel that the pipes are one) as it’s no longer needed, leaving some nicely arranged pipe characters. My loading animation foundation was laid.

The hard part would be actually animating the pipes… or would it.

Naturally I looked to my Animation Chainer library to help out. With a few lines of code I had the animation going.

Basically I walk through each pipe and get its opacity to animate from 100% to 30%. Then the animation waits a bit before starting again (so the other animations around the circle complete). The animation then repeats… forever 🙂

Sample and demo

Live Demo

<Sample Code>

Ajaxy animation sample code

</Sample Code>

The chainer code is quite simple:


void beginAnim()
{
	AnimationChainManager am = new AnimationChainManager(false);

	int delay = 0;

	foreach (UIElement child in SpinWheel.Children)
	{                
		am.Add()
			.DoubleAnimationK() // Create a new Double animation with keyframes
			.Target(child) // Target the UIElement
			.Property(Path.OpacityProperty) // Change the opacity of the object.
			.KeyFrame(1, new TimeSpan(0))// At time 0, have opacity of 100%
			.KeyFrame(.3, new TimeSpan(0, 0, 0, 1, 0)) // Move to 30% at 1 second
			.KeyFrame(.3, new TimeSpan(0,0,0,0,700)) // Wait 700 ms before repeating (this is how long it takes to get back around
			.Repeat() // Keep doing it forever
			.Offset(new TimeSpan(0,0,0,0,delay))                
			.Queue();

		delay += 100; // wait 100ms in between each animation, so they start slightly after each other (create the wheel effect)
	}           
}

I’ve added a couple of new options to the chainer fluent interface.

  • Ability to repeat
  • If tests. Basically they take a lambda… if the lambda returns true it will run the following commands. .EndIf clears out the if test.

I’ve not used the if tests in this project, it was just a muck around that I’ve decided to leave in for next time 🙂

Once the animations have been configured once they look after themselves. Just repeat as needed, animating in sequence around the wheel.

Keep in mind that even when hidden these animations will still run in the background – so put the animation in to a user control and add and remove it from the visual tree as you need to show and hide the animation.

12 thoughts on “Simple Ajax Style Loading Animation in Silverlight

  1. Jordan, great animation. However, how do I get rid of the animating forever part?

    My scenario is I need to get get some data. While I’m doing that I want the animation going. Once I have the data, I need the animation to go away.

    Don’t see any obvious methods in your Chainer project.

  2. Hey Robert,

    I have an updated version with just that… I’ll post it and leave another comment here later in the week.

    Cheers,

    Jordan.

  3. Looks great! I’d love to see a version that could be stopped and started too. Even better would be if it was packaged as a control (something I’m trying to do with yours now). Thanks!

    -Keith

  4. Have you posted the new version yet? I can’t seem to find it, even though people are referring to it.

  5. Pingback: Andrew

Comments are closed.