Merge pull request #4354 from hashicorp/jo-loading

Update loading animation
hashicorp · Apr 13, 2018 · 12fbbaa · 12fbbaa
2 parents 57d678d + aa4efd8
commit 12fbbaa
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>