AngularJS loading indicator.

gistfile1.coffee

ACTIVE_CLASS = 'active'
ERROR_CLASS = 'ng-error'
SUCCESS_CLASS = 'ng-ok'

angular.module('app')
.config([ '$httpProvider', ($httpProvider) ->
  $el = angular.element document.getElementById 'loading'

  $httpProvider.responseInterceptors.push 'LoadingIndicator'
  $httpProvider.defaults.transformRequest.push (data, headersGetter) ->
    $el.removeClass "#{SUCCESS_CLASS} #{ERROR_CLASS}"
    $el.addClass ACTIVE_CLASS

    return data
])
.factory 'LoadingIndicator', [ '$q', ($q) ->
  $el = angular.element document.getElementById 'loading'

  return (promise) ->
    promise.then (response) ->
      $el.addClass SUCCESS_CLASS
      $el.removeClass ACTIVE_CLASS

      return response

    , (response) ->
      $el.addClass ERROR_CLASS
      $el.removeClass ACTIVE_CLASS

      return $q.reject response
]

gistfile2.less

$base3   =   #fdf6e3

$yellow  =   #b58900
$red     =   #dc322f
$green   =   #859900


#loading
  background $yellow
  color $base3
  font-weight bold
  left 50%
  line-height 22px
  margin-left 30px
  position fixed
  text-align center
  top -22px
  width 100px

  transition-property top
  transition-delay .5s
  transition-duration .5s

  &.active
    top 0px
    transition-delay 0s

  &.ng-error
    background $red
  &.ng-ok
    background $green