From 3b74a209107490e8b22fbedd3aafb1dd3cafb942 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Fri, 2 Mar 2018 10:49:35 +0000
Subject: [PATCH] feat(overlayLoader): Add OverlayLoader

---
 common/app/helperComponents/OverlayLoader.jsx | 62 +++++++++++++++++
 common/app/helperComponents/index.js          |  1 +
 .../helperComponents/overlayLoader-styles.js  | 68 +++++++++++++++++++
 3 files changed, 131 insertions(+)
 create mode 100644 common/app/helperComponents/OverlayLoader.jsx
 create mode 100644 common/app/helperComponents/overlayLoader-styles.js

diff --git a/common/app/helperComponents/OverlayLoader.jsx b/common/app/helperComponents/OverlayLoader.jsx
new file mode 100644
index 0000000000..6ca095a494
--- /dev/null
+++ b/common/app/helperComponents/OverlayLoader.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './overlayLoader-styles';
+
+function LoaderCircle({ delay, origin }, i) {
+  return (
+    <circle
+      className='innerCircle'
+      cx='50%'
+      cy='50%'
+      fill='transparent'
+      key={ i }
+      r='5%'
+      stroke='#006400'
+      strokeWidth='3'
+      style={{ animationDelay: '' + delay, transformOrigin: '' + origin }}
+    />
+  );
+}
+
+LoaderCircle.propTypes = {
+  delay: PropTypes.string.isRequired,
+  origin: PropTypes.string.isRequired
+};
+LoaderCircle.displayName = 'LoaderCircle';
+
+const animationProps = [
+  {
+    delay: '-1.5s',
+    origin: '1% 1%'
+  },
+  {
+    delay: '-1s',
+    origin: '1% 99%'
+  },
+  {
+    delay: '-0.5s',
+    origin: '99% 1%'
+  },
+  {
+    delay: '0s',
+    origin: '99% 99%'
+  }
+];
+
+function OverlayLoader() {
+  return (
+    <div className='svg-container'>
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <svg className='svg' height='100%' width='100%'>
+        {
+          animationProps.map(LoaderCircle)
+        }
+      </svg>
+    </div>
+  );
+}
+
+OverlayLoader.displayName = 'OverlayLoader';
+
+export default OverlayLoader;
diff --git a/common/app/helperComponents/index.js b/common/app/helperComponents/index.js
index b632f684ad..d3150f4d04 100644
--- a/common/app/helperComponents/index.js
+++ b/common/app/helperComponents/index.js
@@ -1,4 +1,5 @@
 export { default as FullWidthRow } from './FullWidthRow.jsx';
 export { default as Loader } from './Loader.jsx';
+export { default as OverlayLoader } from './OverlayLoader.jsx';
 export { default as Spacer } from './Spacer.jsx';
 export { default as ButtonSpacer } from './ButtonSpacer.jsx';
diff --git a/common/app/helperComponents/overlayLoader-styles.js b/common/app/helperComponents/overlayLoader-styles.js
new file mode 100644
index 0000000000..11ce0f43cc
--- /dev/null
+++ b/common/app/helperComponents/overlayLoader-styles.js
@@ -0,0 +1,68 @@
+export default `
+
+.svg-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index:5;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100vh;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align:center;
+      -ms-flex-align:center;
+          align-items:center;
+}
+
+.svg-container + div {
+  -webkit-filter: blur(5px);
+          filter: blur(5px);
+}
+
+@-webkit-keyframes overlay-loader {
+  0% {
+    -webkit-transform: scale(0.1);
+    transform: scale(0.1);
+    opacity: 0;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.0;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes overlay-loader {
+  0% {
+    -webkit-transform: scale(0.1);
+    transform: scale(0.1);
+    opacity: 0;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.0;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.innerCircle {
+    -webkit-animation-duration: 2s;
+            animation-duration: 2s;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+    -webkit-animation-name: overlay-loader;
+            animation-name: overlay-loader;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+}
+
+`;