A Simple WPF Loading Animation

August 21st, 2009

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.

Brian Lagunas

  • matt

    There are a lot of hits for ajax loading animations. #1 was http://www.ajaxload.info/ , it pretty good

  • http://brianlagunas.com Brian Lagunas

    @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.

  • anon

    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/

  • http://www.arjansworld.com/2009/08/23/linkblog-for-aug-23-2009/ Arjan’s World » LINKBLOG for Aug 23 – 2009

    [...] A Simple WPF Loading Animation – Brian Lagunas [...]

  • http://www.alvinashcraft.com/2009/08/23/dew-drop-august-23-2009/ Dew Drop – August 23, 2009 | Alvin Ashcraft’s Morning Dew

    [...] A Simple WPF Loading Animation (Brian Lagunas) [...]

  • http://www.ecyber.com Rafee

    The animation works fine.
    Like to see more stuff on animations – WPF

  • http://none Joan

    This was a great resource thx for putting it up on the web.

  • Mzworowski

    Thanks!

  • Simon

    Thanks, just what the doctor ordered!

  • Mohamed

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

  • Jignesh

    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 ) .

  • Giuseppe Russo

    so it’s not just me then. did you sort it out?

  • Markus Ewald

    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

  • Diaz_santiago_e

    I’ll try it. thank you a lot!

  • Pratamishus

    You could have just used http://preloaders.net.

  • http://elegantcode.com Brian Lagunas

    Sorry, but the link provided doesn’t do much good for WPF

  • Ioanaik

    Really nice. :D
    It does make your life easier!

  • Ioanaik

    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.

blog comments powered by Disqus