AngularJS show loader on every page

Question

I am trying to make a loader that will show on every page and fade out when all the content is loaded. Here is my code so far:

<div id="loader-wrapper" data-loader-drct data-ng-hide="hidden">
        <div id="loader"></div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
</div><!--end loader-wrapper-->

 

app.directive('loaderDrct', [function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {

                scope.$on('$routeChangeSuccess', function () {
                    var hide = false;
                    scope.hidden = hide;

                    scope.$on('$viewContentLoaded', function () {
                        hide = true;
                        scope.hidden = hide;
                    });
                });
            }
        }
}]);

When I execute this code, the loader is hiding (with some CSS added), but when I go to another page, the loader is not shown again. The ng-hide class is still there, which means that this directive has already been executed and did not refresh after going to the new page.

How can I make the loader show and hide on every page?

Answer 1

ok, I found a solution made by michael. The problem is that the templates are loaded and the browser has no time to make the changes visible . You can find the full answer here: Angular js - show/hide loading gif every new route

Answer 2

For load while upload/download files

Add in index.html

<div id="loading_wrapper">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>

And Add in controller.js

var $loadingWrapper = angular.element('#loading_wrapper');

Note: Make sure whether font-awesome css files installed or not. Otherwise, you can use simply bootstrap components.