loader animation added to pages

Change-Id: Id8c890714d0a90ae913b6581cd655abcf6cd6781
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
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
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