Funky little spinner (Ruby on Rails/Ajax)

Spinners and progress bars are the equivalent of chrome spinners on wheels. Having them makes you look cool. That and it keeps your users calm*.

In Rails, you can call

Element.show('spinner')

to show a spinner, and then

Element.hide('spinner')

it to make it vanish when you’ve completed your AJAX call. These things are included if you use the javascript :defaults.

Without going into the remote AJAX calls, where exactly do you get the spinner to come out, and where is spinner.gif that is all over the Internet?

Well, your spinner is typically a div that is a hidden element by default. When the AJAX call begins, it un-hides the element (along with whatever text is with it), and then (if you make it) resets its state (hides it) when complete. Through the power of DOM manipulation, you’re basically showing and hiding something on a page. What makes it a spinner is that it includes a moving graphic to give the user an illusion of progress.

There are multiple considerations when looking into adding a shiny spinner though:

0. Which spinner should I choose?
1. Where do you get a spinner? (Questionable facets include licensing/copyright considerations for the paranoid policy follower)
2. How do you insert it as hidden div?

Question #0:
As your Ajax call can complete at almost any time, its generally a good idea to have a continously running spinner that is both interesting, and has no apparent end.

Bad “spinners” (if they can be called that), are progress bars. Users are generally apt to see a progress bar as something which will end eventually. Although you can do what others have been doing thus far (and change the progress bar into an infinitely running one), you’ll only serve to annoy your users.

A better spinner is one that has no apparent start or end, which tells your user that your application hasn’t seized up and died. (Similar to the old form of Windows hardware detection, which would display a progress bar to show you that the system was alive and kicking)

Question #1:
A spinner can be had from pretty much anywhere nowadays. Unfortunately I will have to eat part of my previous question as I haven’t seen one under a particular license (but let me know if I missed something):

Here are a few that i’ve looked into:
http://www.ajaxload.info/ – A very cool website that dynamically generates a spinner for you, according to your preferences.
http://www.napyfab.com/ajax-indicators/ – A page of various moving spinners and progress bars. They’re all on one page, so if your browser gets an aneurysm from having too many moving things on screen, don’t click.

For the license paranoid, a quick G/Y search should do the trick.

Question #2:
The div looks something like this:
<div id=”spinner” style=”display:none;”>
Looking.. <img alt=”Spinner” src=”/images/spinner.gif?1174174309″>
</div>

Note, that you should drop the spinner into your Rails public/images folder. I’m working on not getting code munged here (its still a little bit difficult though)

* There is this story about a hotel which was dealing with elevator problems. Evidently, they wanted to install more elevators (a costly proposition back then, and today). What they did instead was install mirrors, and suddenly the complaints vanished. People were so engrossed by seeing themselves in the mirror that time passed by quickly.

Note: For the img tag, there is actually no need to reference the file directly — instead use the image_tag helper provided by Rails.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: