commit 428375e827eae425c6e08dcc27ccdc13c035e6f9
author Michael Davis <michael.s.davis@ibm.com> Tue Aug 01 15:48:34 2017 -0500
committer Adriana Kobylak <anoo@us.ibm.com> Mon Oct 09 13:57:57 2017 -0500
tree a51c196ea21ae946fe863dc9a3fc27534f3a52c9
parent df3bd12408c3ec0d21a0d9b42694ee42d2fb6f80

loader animation added to pages

Change-Id: Id8c890714d0a90ae913b6581cd655abcf6cd6781
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

app/common/directives/loader.html

diff --git a/app/common/directives/loader.html b/app/common/directives/loader.html
index 65f818b..fd6e0cb 100644
--- a/app/common/directives/loader.html
+++ b/app/common/directives/loader.html
@@ -1,3 +1,4 @@
-<div class="loader__wrapper"><svg class="loader" viewBox="25 25 50 50">
+<div class="loader__wrapper" ng-show="loading"><svg class="loader" viewBox="25 25 50 50">
 	<circle class="loader__path" cx="50" cy="50" r="20"/></circle>
-</svg></div>
\ No newline at end of file
+</svg></div>
+<div class="loader__overlay" ng-show="loading"></div>
\ No newline at end of file

app/common/directives/loader.js

diff --git a/app/common/directives/loader.js b/app/common/directives/loader.js
new file mode 100644
index 0000000..9a06055
--- /dev/null
+++ b/app/common/directives/loader.js
@@ -0,0 +1,16 @@
+window.angular && (function (angular) {
+    'use strict';
+
+    angular
+        .module('app.common.directives')
+        .directive('loader', function () {
+            return {
+                'restrict': 'E',
+                'templateUrl': 'common/directives/loader.html',
+                scope: {
+                    loading: '='
+                }
+            };
+        });
+
+})(window.angular);
\ No newline at end of file

app/common/styles/elements/loader.scss

diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
index a711e04..1f1cd56 100644
--- a/app/common/styles/elements/loader.scss
+++ b/app/common/styles/elements/loader.scss
@@ -8,11 +8,12 @@
 .loader__wrapper {
   width: 115px;
   height: 115px;
-  position: relative;
-  top: 0;
+  position: fixed;
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   margin: 3em 0;
+  z-index: 91;
 }
 
 .loader{
@@ -20,7 +21,7 @@
   height:100%;
   transform: translateZ(0) rotate(360deg);
   transform-origin: center center;
-  -moz-transform-origin: 50px 50px; /* firefox requires fixed values */
+  -moz-transform-origin: center center; /* firefox requires fixed values */
   animation: rotate 1s linear infinite;
 }
 
@@ -37,4 +38,17 @@
   transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
   -webkit-animation: a 4s ease-out infinite;
   animation: a 4s ease-out infinite;
+}
+
+.loader__overlay {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #fefefe;
+  height: 100%;
+  z-index: 90;
+  opacity: .7;
+  width: 100%;
+  -webkit-animation: fade 1s ease-in;
 }
\ No newline at end of file