Replace loading bar to nprogress

This commit replaces the loading bar to the nprogress. It is fancier
than the original one. And this new loading bar have the ability to
inform users about the true progress. So we might be able to implement
a better progress bar mechanism in the future.

Change-Id: If3b4ef66759e96c6807bd6aea150c21ffb3f95d1

app/js/services/health-api.js

@@ -3,6 +3,8 @@
 var angular = require('angular');
 
 var servicesModule = require('./_index.js');
+var nprogress = require('nprogress');
+nprogress.configure();
 
 /**
  * @ngInject
@@ -17,6 +19,7 @@ function httpProviderInterceptor($httpProvider) {
     return {
       'request': function(config) {
         count++;
+        nprogress.start();
 
         $rootScope.$broadcast('loading-started');
         $rootScope.loadingStatus = 'loading';
@@ -29,12 +32,14 @@ function httpProviderInterceptor($httpProvider) {
 
         if (count === 0 && $rootScope.loadingStatus !== 'error') {
           $rootScope.loadingStatus = null;
+          nprogress.done();
         }
 
         return response || $q.when(response);
       },
       'responseError': function(rejection) {
         count--;
+        nprogress.done();
 
         // we only ever get useless '404' errors with JSONP, so don't bother
         // including a message

app/styles/_header.scss

@@ -81,7 +81,7 @@
 
 body.ng-scope {
   background: white url(../images/openstack-page-bkg.jpg) no-repeat scroll 0px 0px;
-  border-top: 3px solid #255e6e;
+  border-top: 0px;
   color: #535353;
   padding-top: 0px;
 }

app/styles/_nprogress.scss

@@ -0,0 +1,73 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 40px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

app/styles/main.scss

@@ -3,6 +3,8 @@
 @import 'bootstrap';
 @import 'font-awesome/font-awesome';
 @import 'sb-admin-2';
+@import 'nprogress';
+
 @import 'nv.d3';
 @import 'header';
 @import 'footer';

app/views/templates/loading-indicator.html

@@ -1,8 +1,4 @@
-<div class="alert alert-info navbar navbar-fixed-bottom text-center" ng-if="loadingStatus == 'loading'">
-    <fa name="refresh" spin></fa> <strong>Loading...</strong>
-</div>
-
-<div class="alert alert-danger navbar navbar-fixed-top text-center" ng-if="loadingStatus == 'error'">
+<div class="alert alert-danger navbar navbar-fixed-bottom text-center" ng-if="loadingStatus == 'error'">
     <fa name="exclamation-circle"></fa>
     <strong>Unable to load this page!</strong>
     An API error occurred.

package.json

@@ -60,6 +60,7 @@
     "karma-subunit-reporter": "0.0.4",
     "moment": "^2.11.1",
     "morgan": "^1.6.1",
+    "nprogress": "^0.2.0",
     "pretty-hrtime": "^1.0.0",
     "protractor": "^2.2.0",
     "protractor-http-mock": "^0.1.18",