init

assets/styles/components/_loading.scss

@@ -0,0 +1,55 @@
+.loading-overlay {
+  &.is-full-page {
+    .loading-background {
+      background:rgba(0,0,0,0.85);
+    }
+  }
+  .loading-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .loading-tornado {
+      &:after {
+        content: '';
+        display: block;
+        height: 60px;
+        width: 60px;
+        background-image: url('../img/logo.svg');
+        animation: spinAroundReverse 2000ms infinite linear;
+      }
+    }
+
+    .loading-message {
+      padding-top: .5rem;
+      color: $primary;
+      text-align: center;
+
+      + .button {
+        margin-top: .5rem;
+      }
+    }
+    .loading-alert {
+      padding-top: 1.5rem;
+      color: $primary;
+      font-size: 0.8rem;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .button {
+        margin-top: 1rem;
+        font-size: 0.8rem;
+      }
+    }
+  }
+}
+
+@keyframes spinAroundReverse {
+  from {
+    transform: rotate(359deg); }
+  to {
+    transform: rotate(0deg); }
+}