From 45b1efe2590990620f693460bed2ade84847891d Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Fri, 13 Apr 2018 12:58:10 -0600
Subject: [PATCH] Update loading animation

---
 ui/app/styles/utils/_bulma_variables.scss |  2 +-
 ui/app/templates/partials/loading.hbs     |  7 +--
 ui/app/templates/svg/vault-loading.hbs    | 61 +++++++++++++++++++++++
 3 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 ui/app/templates/svg/vault-loading.hbs

diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss
index 5ee88490b..7d6812849 100644
--- a/ui/app/styles/utils/_bulma_variables.scss
+++ b/ui/app/styles/utils/_bulma_variables.scss
@@ -37,7 +37,7 @@ $border: $grey-light;
 $hr-margin: 1rem 0;
 
 //typography
-$family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+$family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $family-primary: $family-sans;
 $body-size: 14px;
 $size-3: (24/14) + 0rem;
diff --git a/ui/app/templates/partials/loading.hbs b/ui/app/templates/partials/loading.hbs
index fcf87707a..7bd1c71de 100644
--- a/ui/app/templates/partials/loading.hbs
+++ b/ui/app/templates/partials/loading.hbs
@@ -2,12 +2,7 @@
   <div class="columns is-centered">
     <div class="column is-narrow has-text-centered has-text-grey-dark has-current-color-fill">
       <div class="level is-mobile">
-        <div class="level-item">
-          <span class="loader is-inline-block"></span>
-        </div>
-        <div class="level-item">
-          &nbsp;&nbsp;Loading&hellip;
-        </div>
+        {{partial 'svg/vault-loading'}}
       </div>
     </div>
   </div>
diff --git a/ui/app/templates/svg/vault-loading.hbs b/ui/app/templates/svg/vault-loading.hbs
new file mode 100644
index 000000000..f51a4e666
--- /dev/null
+++ b/ui/app/templates/svg/vault-loading.hbs
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1" id="vault-loading" role="alert" aria-label="Loading">
+  <style>
+    #vault-loading polygon {
+      animation: vault-loading-animation 1.3s infinite ease-in-out;
+      transform-origin: 50% 50%;
+      fill: #DCE2E9;
+    }
+
+    #vault-loading .vault-loading-order-1 {
+      animation-delay: .1s;
+    }
+
+    #vault-loading .vault-loading-order-2 {
+      animation-delay: .2s;
+    }
+
+    #vault-loading .vault-loading-order-3 {
+      animation-delay: .3s;
+    }
+
+    #vault-loading .vault-loading-order-4 {
+      animation-delay: .4s;
+    }
+
+    @keyframes vault-loading-animation {
+      0%,
+      70%,
+      100% {
+        transform: scale3D(1, 1, 1);
+      }
+
+      35% {
+        transform: scale3D(0, 0, 1);
+      }
+    }
+  </style>
+  <g id="vault-loading-y1">
+    <polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
+    <polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
+    <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" style="transform-origin: 15px 5px" />
+    <polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
+    <polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
+    <polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
+    <polygon class="vault-loading-order-4" points="30,0 35,10 40,0" style="transform-origin: 35px 5px" />
+  </g>
+  <g id="vault-loading-y2">
+    <polygon class="vault-loading-order-3" points="5,10 10,20 15,10" style="transform-origin: 10px 15px" />
+    <polygon class="vault-loading-order-1" points="10,20 15,10 20,20" style="transform-origin: 15px 15px" />
+    <polygon class="vault-loading-order-2" points="15,10 20,20 25,10" style="transform-origin: 20px 15px" />
+    <polygon class="vault-loading-order-1" points="20,20 25,10 30,20" style="transform-origin: 25px 15px" />
+    <polygon class="vault-loading-order-3" points="25,10 30,20 35,10" style="transform-origin: 30px 15px" />
+  </g>
+  <g id="vault-loading-y3">
+    <polygon class="vault-loading-order-3" points="10,20 15,30 20,20" style="transform-origin: 15px 25px" />
+    <polygon class="vault-loading-order-2" points="15,30 20,20 25,30" style="transform-origin: 20px 25px" />
+    <polygon class="vault-loading-order-3" points="20,20 25,30 30,20" style="transform-origin: 25px 25px" />
+  </g>
+  <g id="vault-loading-y4">
+    <polygon class="vault-loading-order-4" points="15,30 20,40 25,30" style="transform-origin: 20px 35px" />
+  </g>
+</svg>
\ No newline at end of file