A Simple WPF Loading Animation
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.
Here is the source: Download the Loading Animation Source
I hope it is useful to someone besides me.
There are a lot of hits for ajax loading animations. #1 was http://www.ajaxload.info/ , it pretty good
@matt
Thanks for the tip, but ajax doesn’t do me any good in WPF, but I will bookmark it for my next ASP.NET project.
Thanks for the source.
BTW here is another article about this type of animation that I found helpful.
http://blog.wpfwonderland.com/2009/06/26/arranging-shapes-in-circle-with-expression-blend-part-one/
The animation works fine.
Like to see more stuff on animations – WPF
This was a great resource thx for putting it up on the web.
Thanks!
Thanks, just what the doctor ordered!
now 2011, I found other examples, but still, I like yours better
thanks for sharing
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 ) .
so it’s not just me then. did you sort it out?
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
I’ll try it. thank you a lot!
You could have just used http://preloaders.net.
Sorry, but the link provided doesn’t do much good for WPF
Really nice. 😀
It does make your life easier!
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.