jquery ajax indicator, automatic, intelligent

Very nice ajax indicator, displays only for ajax action which take longe than 500ms, and show up fully automatic for all ajax actions.

Layout / Template

  ...

  <!-- Loading indicator, show for all ajax action longer than 500ms -->
  <div class="loading-indicator"></div>
  <script>
    $body = $("body");
    var loadingTimeout;
    
    $(document).bind({
        ajaxStart: function() {
          loadingTimeout = setTimeout(function() {
            $body.addClass("loading");
          }, 500);
        },
        ajaxStop: function() {
          clearTimeout(loadingTimeout);
          $body.removeClass("loading");
        }    
    });  
  </script>  
    
</body>
</html>

CSS

/* loading indicator */
.loading-indicator {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .5 )
                url('/images/ajax-loading.gif')
                50% 50%
                no-repeat;
}
body.loading .loading-indicator {
    display: block;
}