title: How to display an animated icon during Ajax request processing - Rails 3
body: <p>I am trying to display an loading indicator for every ajax request, I working in a rails 3 app. </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="loading-indicator"&gt;
   &lt;%= image_tag("loading.gif", :id =&gt; "loading-indicator", :style =&gt; "display:none") %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#loading-indicator {
     position: absolute;
     left: 10px;
     top: 10px;
   }
  </code></pre>
  
  <p><strong>loading.js:</strong> which I placed in assest/javascripts/</p>
  
  <pre><code>$(document).ready(function(){
      $(document).ajaxSend(function(event, request, settings) {
          $('#loading-indicator').show();
      });
  
      $(document).ajaxComplete(function(event, request, settings) {
          $('#loading-indicator').hide();
      });
  });
  </code></pre>
  
  <p><strong>My application.js looks like this:</strong></p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require bootstrap
  //= require_tree .
  </code></pre>
  
  <p>It dosent work, nothing shows up. Any help would be appreciated.</p>