AJAX request indicator (CoffeeScript, BackboneJS, jQuery)

init_loader.js.coffee

$(document).ready ->
 myApp.loader = new myApp.views.LoadingIndicator()

$(document).ajaxSend -> myApp.loader.start()
$(document).ajaxComplete -> myApp.loader.finish()
$(document).ajaxError -> myApp.loader.finish()

loader.css.scss

#loading {
  position: fixed;
  top: 10px;
  left: 8px;
  width: 106px;
  height: 30px;
  background: white;
  color: #22668b;
  opacity: 0.6;
  border-radius: 5px;
  padding-top: 6px;
  padding-left: 14px;

  span {
    padding-left: 3px;
    padding-top: 2px;
  }
}

loading_indicator.js.coffee

class myApp.views.LoadingIndicator extends Backbone.View
  counter: 0
  delay: 500
  lastServerAction: null

  constructLoader: ->
    # Uses FontAwesome icon
    $('<div id="loading"><i class="fa fa-lg fa-refresh fa-spin"></i> <span>Loading...</span></div>')

  render: ->
    @$loader = @constructLoader()
    $('body').append(@$loader)
    @$loader.hide()

  start: ->
    @render() unless @$loader
    @lastServerAction = new Date()
    @$loader.show() if @counter is 0
    ++@counter

  finish: ->
    return unless @$loader
    --@counter if @counter > 0
    setTimeout (=> @$loader.hide('fast')), @delay if @counter is 0

  reset: -> @counter = 0