AngularJS Loading Progress Bar

Answer :

For a progress bar as YouTube has, you can take a look at ngprogress. Then just after the configuration of your app (for example), you can intercept route's events.

And do something like:

app.run(function($rootScope, ngProgress) {   $rootScope.$on('$routeChangeStart', function() {     ngProgress.start();   });    $rootScope.$on('$routeChangeSuccess', function() {     ngProgress.complete();   });   // Do the same with $routeChangeError }); 

Since @Luc's anwser ngProgress changed a bit, and now you can only inject ngProgressFactory, that has to be used to create ngProgress instance. Also contrary to @Ketan Patil's answer you should only instantiate ngProgress once:

angular.module('appRoutes', ['ngProgress']).run(function ($rootScope, ngProgressFactory) {       // first create instance when app starts     $rootScope.progressbar = ngProgressFactory.createInstance();      $rootScope.$on("$routeChangeStart", function () {         $rootScope.progressbar.start();     });      $rootScope.$on("$routeChangeSuccess", function () {         $rootScope.progressbar.complete();     }); });