How can I show the loading spinner while loading the "next page" in an Angular JS webisite?
Here's the JS code:

```
var app = angular.module('changePage', [])

app.config(['$routeProvider', function ($routeProvide) {
    $routeProvide
        .when('/', {
            title: 'Home',
            templateUrl: 'home.html',
            controller: ctrl
        })        
        .when('/chisono', {
            title: 'Chi Sono',
            templateUrl: 'chisono.html',
            controller: ctrl
        })
        .when('/video', {
            title: 'Video',
            templateUrl: 'video.html',
            controller: ctrl
        })
        .when('/attrezzatura', {
            title: 'Attrezzatura',
            templateUrl: 'attrezzatura.html',
            controller: ctrl
        })  
        .when('/contatti', {
            title: 'Contatti',
            templateUrl: 'contatti.php',
            controller: ctrl
        })            
        .otherwise({ redirectTo: '/' });
}]); 

app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

function ctrl($scope){};

```

and the HTML code:

```
<nav class="nav-buttons">
                        <a href="#/chisono"><li></li></a>
                        <a href="#/video"><li></li></a>
                        <a href="#/attrezzatura"><li></li></a>
                        <a href="#/contatti"><li></li></a>
</nav>

```

At the moment it show the next page only when it is loaded, in the meanwhile I wanna show the loading spinner gif.

How can I implement this feature in my code?