ngLoading

Beautiful, automatic loading screens for your Angularjs apps



  You can configure ngLoading globally

  angular.module('myApp', ['ngLoading'])
  .config(function(loadingProvider) {
    loadingProvider
      .load({
        transitionSpeed: {{ config.transitionSpeed }},
        class: {{ config.class }},
        icon: {{ config.icon }},
        overlay: {
          display: {{ config.overlay.display }},
          color: {{ config.overlay.color }},
          opacity: {{ config.overlay.opacity }}
        }
      })
  });
        
OR

  For each individual http request

  $http({
    loadingConfig: {
      transitionSpeed: {{ config.transitionSpeed }},
      class: {{ config.class }},
      icon: {{ config.icon }},
      overlay: {
        display: {{ config.overlay.display }},
        color: {{ config.overlay.color }},
        opacity: {{ config.overlay.opacity }}
      }
    }
  }).then(function(result) {
    //do something
  });