HowTo: Add Ajax Indicators

Copy the following code to public/javascripts/application.js

Ajax.Responders.register({
  onCreate: function() {
    if (Ajax.activeRequestCount > 0)
      Element.show('indicator');
  },

  onComplete: function() {
    if (Ajax.activeRequestCount == 0)
      Element.hide('indicator');
  }
});

Add a div element to your view with an id of ‘indicator’. Remember to keep this div from displaying by setting the display attribute to none.

#indicator{style => 'display:none'}
  = image_tag ('/images/my_loading_indicator.gif')


Here is a good site to create your own indicator image.