loader animation added to pages

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

1 files changed, 18 insertions, 4 deletions

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