How to display an animated icon during Ajax request processing - Rails 3

I am trying to display an loading indicator for every ajax request, I working in a rails 3 app.

HTML:

<div id="loading-indicator">
 <%= image_tag("loading.gif", :id => "loading-indicator", :style => "display:none") %>
</div>

CSS:

#loading-indicator {
   position: absolute;
   left: 10px;
   top: 10px;
 }

loading.js: which I placed in assest/javascripts/

$(document).ready(function(){
    $(document).ajaxSend(function(event, request, settings) {
        $('#loading-indicator').show();
    });

    $(document).ajaxComplete(function(event, request, settings) {
        $('#loading-indicator').hide();
    });
});

My application.js looks like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

It dosent work, nothing shows up. Any help would be appreciated.