javascript - Initial loading spinner for AngularJS -

i want show spinner on first load of application like: https://devart.withgoogle.com/

i've attempted via services module so:

angular.module('initialload', [])     .config(function ($httpprovider) {         $httpprovider.responseinterceptors.push('myhttpinterceptor');         var spinnerfunction = function (data, headersgetter) {             $('#loading').fadein();             return data;         };         $httpprovider.defaults.transformrequest.push(spinnerfunction);     })     .factory('myhttpinterceptor', function ($q, $window) {         return function (promise) {             return promise.then(function (response) {                 $('#loading').fadeout(function(){                     $(this).remove();                 });                 return response;             }, function (response) {                $('#loading').fadeout(function(){                     $(this).remove();                 });                 return $q.reject(response);             });         };     }); 

but there number of things wrong this... first of doesn't listen first load listens every request. doesn't show , hide loading elegant way it's been done on devart, , i'm using jquery hide , show loading spinner instead of using angular animate.

can help? clarify initial app load! , not showing spinner on subsequent requests. use that: https://github.com/chieffancypants/angular-loading-bar want show splash app start different.

if want hide app while angularjs loads default spinner being displayed using plain html, , use ng-cloak hide angular portions of application.

https://docs.angularjs.org/api/ng/directive/ngcloak

once app loads can turn off spinner using ng-hide/ng-show.

<div ng-controller="topcontroller">   <div class="spinner" ng-hide="apploaded"/>   <div ng-cloak ng-view>      ... angular view giblets go here...   </div> </div> 

here working example:

http://jsfiddle.net/kltzm93x/