1 files changed, 71 insertions, 1 deletions
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss
index f333fd2..8c9bf46 100644
--- a/design/sass/_modal.scss
+++ b/design/sass/_modal.scss
@@ -1,4 +1,4 @@
-#overlay{
+#overlay, #loading {
     position:fixed;
     width:100vw;
     height:100vh;
@@ -60,6 +60,9 @@
     max-width: 52%;
     width: 90%;
 }
+#loading #overlay-wrapper {
+    max-width: 10%;
+}
 #modal {
     min-height: 330px;
     padding: 0 1rem 1rem 1rem;
@@ -92,6 +95,9 @@
     }
 
 }
+#loading #modal {
+    min-height: auto;
+}
 #hed-wrapper {
     display: flex;
     align-items: center;
@@ -100,3 +106,67 @@
         width: auto;
     }
 }
+
+.loader {
+    font-size: 10px;
+    margin: 50px auto;
+    text-indent: -9999em;
+    width: 11em;
+    height: 11em;
+    border-radius: 50%;
+    background: $link_color;
+    background: -moz-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+    background: -webkit-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+    background: -o-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+    background: -ms-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+    background: linear-gradient(to right, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+    position: relative;
+    -webkit-animation: load3 1.4s infinite linear;
+    animation: load3 1.4s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+}
+.loader:before {
+    width: 50%;
+    height: 50%;
+    background: $link_color;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+}
+.loader:after {
+    background: #fff;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+@-webkit-keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}