Show loading spinner while changing page in an Angular JS website

Question

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?

Answer 1

In the index.html page I put:

    <div id="loading">
       <img src="images/loading.gif">
</div>  

obviously display:none in the css file.

In the functions.js file I put:

$('#navigation a').on('click', function (){$('#loading').css('display','block');});       

and finally in every single page I put on document.ready:

$('#loading').css('display','none');

Easy and it works like it has to work. What do you think about this "noob" solution?

Answer 2

Check "selfinterest" answer here - it has a very elegant solution using ngProgress [YouTube style]:

https://github.com/VictorBjelkholm/ngProgress/issues/10#issuecomment-26452176