21 Aug
2009

A Simple WPF Loading Animation

Category:UncategorizedTag: , , , :

Okay, so I needed a very simple and clean loading animation for a multi threaded application I was working on to notify the user that something was in the process of being loaded.  So of course the first place I looked was Google, because I figured someone else has already written one and I could save myself some time by just using theirs.  Well, after almost an hour searching, I found nothing.  So much for being a timesaver.  Now, don?t get me wrong, I found a couple of WPF animations out there, but none of them really fit what I needed.  So I just decided to bite the bullet and create my own.  After creating the animation I decided to share the fruits of my labor so that anyone else who is looking for the same thing I was, or something similar, wouldn?t have as much trouble as I did.

Here is what it looks like.

loadingAnimation

Here is the source: Download the Loading Animation Source

I hope it is useful to someone besides me.

18 thoughts on “A Simple WPF Loading Animation

  1. now 2011, I found other examples, but still, I like yours better
    thanks for sharing

  2. Thanks for your animation. Though we found it consumes lots of CPU once u load it. CPU usages doesn’t go back to zero even if you hide it ( collapsed ) .

  3. Great, this looks very professional and that it’s 100% XAML without relying on any hand-coded timer stuff is a nice bonus.

    I have cleaned the code up slightly for my own use, replacing the “Block” control with a Path referencing a static resource, replacing the TransformGroups with just a single RotateTransform and using LinearColorKeyFrames instead of SplineColorKeyFrames (there is a very small hickup when the animation loops that I attribute to the spline).

    Here’s my cleaned-up version as a single Xaml file:
    http://pastebin.com/HtVyNpxc

  4. If you take Markus’ code and replace the color in the Fill (Path) with Fill=”{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}” then u can directly set the color from the User Control Foreground.

Comments are closed.