Angular js preloader

Гугля, я сразу наткнулся на очень простой модуль ngProgress http://victorbjelkholm.github.io/ngProgress/:

const app = angular.module('app', ['ngRoute', 'ngProgress']);
app.config(['$locationProvider', '$routeProvider', ($locationProvider, $routeProvider) => {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            template: `
                <h1>Главная</h1>
                <a href="/">Главная</a>
                <a href="/blog">Блог</a>
            `
        })
        .when('/blog', {
            template: `
                <h1>Блог</h1>
                <a href="/">Главная</a>
                <a href="/blog">Блог</a>
            `
        })
        .otherwise({
            redirectTo: '/'
        });
}]);
app.run(['$rootScope', '$injector', ($rootScope, $injector) => {
    const ngProgress = $injector.get('ngProgressFactory').createInstance();
    $rootScope.$on('$routeChangeStart', () => { 
        ngProgress.start();
    });
    $rootScope.$on('$routeChangeSuccess', () => {
        ngProgress.stop();
    });
}]);

Пример с кастомным прелоадером, тут все намного проще:

app.run(['$rootScope', ($rootScope) => {
    $rootScope.$on('$routeChangeStart', () => { 
        $rootScope.loading = true;
    });
    $rootScope.$on('$routeChangeSuccess', () => {
        $rootScope.loading = false;
    });
}]);

В index.html:

<style>
    .spinner {
        position: absolute;
        // какие-то стили...
    }
</style>
<div class="spinner" ng-if="loading">
    <img src="/to-some-gif-spinner">
</div>
<div ng-view></div>

Но еще есть маленькая проблема - это быстрый роутинг, поэтому ваш спинер может и не отображаться, как вариант добавляем setTimeout:

app.run(['$rootScope', '$timeout', ($rootScope, $timeout) => {
    $rootScope.$on('$routeChangeStart', () => { 
        $rootScope.loading = true;
    });
    $rootScope.$on('$routeChangeSuccess', () => {
        $timeout(() => {
            $rootScope.loading = false;
        }, 500);
    });
}]);