The UX of Ajax Load Animations

Consider the spinner.  There are even sites to help you build these ubiquitous items.  They serve a very useful function.  At heart, the spinner is an animation to take your mind off the fact that the system isn’t instantaneous.  They are also there to communicate to you, “I know what you want, and I am working on it.  Please hold.”

What else can a spinner do?

A spinner also allows you to communicate your culture and personality to your users.  It allows you to engage and communicate in a very specific way.  The user is in the eye of the storm of activity.  It is the calm before the action.  This quiet time is perfect to communicate a quick feeling.  Consider some of the following.


Not very interesting if you ask me.  It seems to say, “I look like a progress bar, but I loop, which means I don’t know how long this will take.  Sorry.”  Even WordPress (a great app) has a candy-cane version of this that isn’t very interesting or engaging. 


This one is nearly ubiquitous.  Everyone uses it.  It’s subtle and communicates effort without confusing when the effort will end.  However, it’s BORING.  What is to love about this?  It loses the opportunity to engage.  Everyone does this.  Are you just like everyone else?  Do you want to be?


This is one I just made.  Needs work  maybe, but it is “different”.  Being different than the throngs is half the battle.  Of course, you will want to have a designer match your site theme to the loading theme so it’s a seamless experience, but try to design out of the box on this.


Wow.  Super simplistic, but it is alot of fun.  I am not suggesting to use any of these examples exactly, but this is a perfect example of something that is fun and interesting and perfectly conveys that the user should wait.  Check out the other varieties of this stick figure theme.


A little choppy, probably could use more tween frames, but the look is definetely different.  This took about 5 minutes to create.  Simply spinning a well designed icon is interesting and different.


This is really cute.  It still conveys waiting.  It conveys character and creativity.  It’s engaging.


I actually used this one in an application and people loved it.  They called them the “skittles”.  This is exactly the feeling you want.  It’s fun, it’s lovable, it’s engaging.  You even want to give it a nickname.

So what is the point here?  I am saying that a spinner is an oppourtunity to be creative and to engage with your customers.  If they believe that your application is fun and interesting, they will overlook some missing features or snags.  They will give you the benefit of the doubt.  You still need a great application, but this is an easy way to earn a few extra points with your users.

I hope Smashing Magazine has a 80 best loading animations article at some point in the future.

4 thoughts on “The UX of Ajax Load Animations”