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

View all posts

9 comments

  • This animation is really nice, but it takes like 25% of CPU and when i’m trying to put in my app i’ve got some troubles with the starting animation and can’t resolve it.

    • I am confident that the animation is not the culprit in your CPU usage problem, and you may have an underlying problem. The way I normally use a loading animation in WPF is in combination with a background worker thread. This allows my long running process to occur on the background thread, while my animation shows the user that something is happening. So, lets say my animation’s visibility property is data bound to an IsBusy property in my ViewModel.

      IsBusy = true; //starts the animation
      BackgroundWorker worker = new BackgroundWorker();
      worker.DoWork += delegate
      {
      //Long running process
      };
      worker.RunWorkerCompleted += delegate(object sender, RunWorkerCompletedEventArgs e)
      {
      IsBusy = false; //stops the animation
      };
      worker.RunWorkerAsync();

      Hope this helps.

  • Actually, the animation is a culprit for CPU usage. There is a 3 tier graphics rendering level, http://msdn.microsoft.com/en-us/library/ms742196.aspx. I’ve been looking into this recently as a project I work on uncovered this as the problem to our terrible performance on some test systems. I ran this animation on a test system that is in the tier 0 category and the CPU usage stayed between 25-30%. I’ve been trying to find a replacement “waiting” indicator so our performance doesn’t suffer. With newer systems in tier 2 you shouldn’t see a performance hit.

    • I would be interested in seeing your test specifications and result documentation. I personally have not experienced this type of behavior on either hardware tier. Could you share your test specs, results, hardware configuration, and you application implementation? I am very intrigued by this performance problem.

  • is the animation running all the time when the object is not even visible? or does it only run when it’s visible?

      • isn’t that not a good thing though. shouldn’t it only be running when the object is displayed or shown. otherwise its using up unnecessary memory.

        • Keep in mind this is a very simple animation that was written back in 2009 as an example. Also, I would not be too concerned with the memory it uses. It would be so insignificant, you would probably never notice it.

          • Thats fair. I just figured I would mention it. Ill maybe expand it to disable me animation based on visibility. Any who Thanks so much for sharing.

Follow Me

Follow me on Twitter, subscribe to my YouTube channel, and watch me stream live on Twitch.