spinner.js

app.controller('MyController', ['$rootScope', function($rootScope) {
  
  $rootScope.$on('$stateChangeStart', function (event, toState) {
     usSpinnerService.spin('spinner-1');
  });
  
  $rootScope.$on('$stateChangeSuccess', function (event, toState) {
     usSpinnerService.stop('spinner-1');
  });

  $rootScope.$on('$stateChangeError', function (event, toState) {
     usSpinnerService.stop('spinner-1');
  });
}]);

Hi F1LT3R,
It is not working and not giving any error also. Do i need to add anything in the html page apart from this codes?

What happens when you console.log in the stateChangeStart event?

 $rootScope.$on('$stateChangeStart', function (event, toState) {
    console.log('STATE CHANGE START');
    console.log(event);
  });

nothing is printed
can you post me the full implementation?

it worked with below code
$rootScope.closeAlert = function(index) {
$rootScope.alerts.splice(index, 1);
};

$rootScope.$on('$routeChangeStart', function () {
    usSpinnerService.spin('pageLoaderSpinner');
 });

 $rootScope.$on('$routeChangeSuccess', function (event, next, current) {
    usSpinnerService.stop('pageLoaderSpinner');
 });

 $rootScope.$on('$routeChangeError', function (event, next, current) {
    usSpinnerService.stop('pageLoaderSpinner');
 });

thanks for your help.

No problem, glad you found something that worked for you!