Tuesday, November 15th, 2005

Ajax Activity indicators with Rails

Category: Examples, Ruby

One of the definite patterns in Ajax is the activity indicator, the tool that we use to let a user know that we are talking back to the server, at that point.

Thomas Fuchs of script.aculo.us has written up how to simply do this in a Rails-based application:

Create an element on the page that should be displayed while AJAX Requests are active. I mostly use an IMG element displaying an animated GIF file. Give this element an id=”busy” attribute.

Create a file application.js in your public/javascripts folder (if you don’t already have one!), and be sure to use <%= javascript_include_tag :defaults %> in the HEAD section of your layout or view template to include the Rails-provided JavaScripts.

Insert the following code into the application.js file:

  onCreate: function() {
    if($('busy') && Ajax.activeRequestCount>0)
  onComplete: function() {
    if($('busy') && Ajax.activeRequestCount==0)

Rails Activity Indicator

Posted by Dion Almaer at 9:23 am

3.9 rating from 31 votes


Comments feed

Anyone know where I can download an animated busy gif like the one shown above (osx-style) ?



Comment by Carl Youngblood — November 15, 2005


Comment by xian — November 15, 2005

Or, you can just use the CSS “cursor:progress” attribute for the body or HTML object. This works at least in Mozilla, FF, and IE6. This is something users would be used to – an arrow with an hourglass (or similar, depending on platform) indicating the page is doing something but they can still work with it.

Comment by Greg Woolsey — November 16, 2005

This works for anyone using prototype.js, not just Ruby on Rails apps.

Works very well too, thanks for sharing!

Comment by Garret — November 17, 2005

Some animated gif for ajax:


Comment by Baldo — December 31, 2005

Are these images copyright free? I’m especially interested in the one from pickemgame.com. Thanks.


Comment by Tobin — February 3, 2006


Some more little activity indicators…

Comment by eddmun — March 11, 2006

I have a web app that makes many Ajax calls, and what I am finding is that the spinner image never goes away. Further investigation showed me that Ajax.activeRequestCount is failing to decrement. Is it supposed to by itself, or is this something I should be doing in my onComplete code?

Comment by Erich — August 31, 2006

i had the same problem, and after looking at the code, realised that the activeRequestCount property seems to only apply if you use

to register a responder on the global Ajax object. At least that worked for me, ymmv. good luck

Comment by milton — October 20, 2006

Leave a comment

You must be logged in to post a comment.