Add loading bar (show loader while changing route)

allure-report-face/src/main/less/app.less

@@ -1,5 +1,6 @@
 /* import basics */
 @import "vendor/bootstrap/bootstrap";
+@import "vendor/loading-bar/loading-bar";
 @import "highlight-github";
 @import "islands/islands";
 @import "base";
@@ -12,6 +13,7 @@
 
 .b-page__nav {
   min-width: 850px;
+  margin-bottom: 0;
   .navbar-header {
     width: 138px;
     float: left;
@@ -34,7 +36,24 @@
   }
 }
 
-
+.loader {
+  position: relative;
+  width: 100%;
+  #loading-bar .bar, #loading-bar-spinner {
+    position: absolute;
+    z-index: 1000;
+  }
+  #loading-bar .bar {
+    background: #FFDD00;
+    .peg {
+      .box-shadow(#FFDD00 1px 0 6px 1px);
+    }
+  }
+  #loading-bar-spinner .spinner-icon {
+    border-top-color: #FFDD00;
+    border-left-color: #FFDD00;
+  }
+}
 
 .dashboard {
   position: absolute;

allure-report-face/src/main/less/vendor/loading-bar/loading-bar.less

@@ -0,0 +1,110 @@
+/*! 
+ * angular-loading-bar v0.5.1
+ * https://chieffancypants.github.io/angular-loading-bar
+ * Copyright (c) 2014 Wes Cruver
+ * License: MIT
+ */
+
+/* Make clicks pass-through */
+#loading-bar,
+#loading-bar-spinner {
+  pointer-events: none;
+  -webkit-pointer-events: none;
+  -webkit-transition: 350ms linear all;
+  -moz-transition: 350ms linear all;
+  -o-transition: 350ms linear all;
+  transition: 350ms linear all;
+}
+
+#loading-bar.ng-enter,
+#loading-bar.ng-leave.ng-leave-active,
+#loading-bar-spinner.ng-enter,
+#loading-bar-spinner.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+
+#loading-bar.ng-enter.ng-enter-active,
+#loading-bar.ng-leave,
+#loading-bar-spinner.ng-enter.ng-enter-active,
+#loading-bar-spinner.ng-leave {
+  opacity: 1;
+}
+
+#loading-bar .bar {
+  -webkit-transition: width 350ms;
+  -moz-transition: width 350ms;
+  -o-transition: width 350ms;
+  transition: width 350ms;
+
+  background: #29d;
+  position: fixed;
+  z-index: 10002;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-bottom-right-radius: 1px;
+  border-top-right-radius: 1px;
+}
+
+/* Fancy blur effect */
+#loading-bar .peg {
+  position: absolute;
+  width: 70px;
+  right: 0;
+  top: 0;
+  height: 2px;
+  opacity: .45;
+  -moz-box-shadow: #29d 1px 0 6px 1px;
+  -ms-box-shadow: #29d 1px 0 6px 1px;
+  -webkit-box-shadow: #29d 1px 0 6px 1px;
+  box-shadow: #29d 1px 0 6px 1px;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+}
+
+#loading-bar-spinner {
+  display: block;
+  position: fixed;
+  z-index: 10002;
+  top: 10px;
+  left: 10px;
+}
+
+#loading-bar-spinner .spinner-icon {
+  width: 14px;
+  height: 14px;
+
+  border:  solid 2px transparent;
+  border-top-color:  #29d;
+  border-left-color: #29d;
+  border-radius: 10px;
+
+  -webkit-animation: loading-bar-spinner 400ms linear infinite;
+  -moz-animation:    loading-bar-spinner 400ms linear infinite;
+  -ms-animation:     loading-bar-spinner 400ms linear infinite;
+  -o-animation:      loading-bar-spinner 400ms linear infinite;
+  animation:         loading-bar-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes loading-bar-spinner {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes loading-bar-spinner {
+  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes loading-bar-spinner {
+  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes loading-bar-spinner {
+  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes loading-bar-spinner {
+  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { transform: rotate(360deg); transform: rotate(360deg); }
+}

allure-report-face/src/main/webapp/index.html

@@ -18,6 +18,7 @@
     <script src="vendor/angular/plugins/angular-ui-router.min.js"></script>
     <script src="vendor/angular/plugins/localstorageprovider.js"></script>
     <script src="vendor/angular/plugins/ui-bootstrap-tpls.js"></script>
+    <script src="vendor/angular/plugins/loading-bar.js"></script>
 
     <script src="vendor/highlight.pack.js"></script>
 
@@ -73,6 +74,7 @@
         Generated in: {{report.time | time}}
     </div>
 </header>
+<div class="loader"></div>
 <div class="dashboard" ng-controller="TabsController">
     <ul class="b-vert list-unstyled">
         <li class="b-vert__item" ng-class="{'b-vert__item_state_selected': isCurrent('overview')}"><div class="b-vert__title" ui-sref="overview">

allure-report-face/src/main/webapp/js/app.js

@@ -1,12 +1,16 @@
 /*global angular */
-angular.module('allure', ['ngAnimate', 'ui.bootstrap', 'localStorageModule', 'ui.router',
+angular.module('allure', ['angular-loading-bar', 'ngAnimate', 'ui.bootstrap', 'localStorageModule', 'ui.router',
         'allure.filters', 'allure.services', 'allure.directives', 'allure.controllers', 'allure.table', 'allure.pane',
         'allure.scrollfix', 'allure.charts', 'allure.testcase', 'allure.xUnit.controllers', 'allure.features',
         'allure.defects', 'allure.overview'])
     .config(function($tooltipProvider) {
         "use strict";
         $tooltipProvider.options({appendToBody:true});
     })
+    .config(function(cfpLoadingBarProvider) {
+        "use strict";
+        cfpLoadingBarProvider.parentSelector = '.loader';
+    })
     .config(function($httpProvider) {
         "use strict";
         $httpProvider.defaults.cache = true;