Loading indicator till app inits (getredash#3788)

pushpay · Nov 14, 2019 · 83e3e3e · 83e3e3e
1 parent 427f8a4
commit 83e3e3e
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 0 deletions.
diff --git a/client/app/assets/less/main.less b/client/app/assets/less/main.less
@@ -75,6 +75,7 @@
 @import 'redash/redash-table';
 @import 'redash/query';
 @import 'redash/tags-control';
+@import 'redash/css-logo';
 
 
 
diff --git a/client/app/assets/less/redash/css-logo.less b/client/app/assets/less/redash/css-logo.less
@@ -0,0 +1,88 @@
+// based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28
+
+@primary: #ff7964;
+@shadow: #ef6c58;
+@bar: white;
+
+#css-logo {
+  width: 100px;
+  height: 100px;
+  position: relative;
+
+  #circle {
+    width: 79px;
+    height: 79px;
+    background-color: @shadow;
+    border-radius: 50%;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+
+    & > div {
+      width: 79px;
+      height: 73px;
+      background-color: @primary;
+      border-radius: 50%;
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  #bars {
+    position: absolute;
+    left: 0;
+    top: 24px;
+    right: 0;
+    height: 33px;
+    display: flex;
+    padding: 0 22px 0;
+
+    .bar {
+      background: @bar;
+      box-shadow: 0px 2px 0 0 @shadow;
+      display: inline-block;
+      border-radius: 1px;
+      align-self: flex-end;
+      flex: 1;
+      margin: 0 2px;
+      border-radius: 3px;
+
+      &:nth-child(1) {
+        height: 32%;
+      }
+
+      &:nth-child(2) {
+        height: 71%;
+      }
+
+      &:nth-child(3) {
+        height: 50%;
+      }
+
+      &:nth-child(4) {
+        height: 100%;
+      }
+    }
+  }
+
+  #point,
+  #point > div {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 17px solid @shadow;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+    bottom: 0;
+    left: 48px;
+    transform: scaleX(0.87);
+    transform-origin: left;
+  }
+
+  #point > div {
+    bottom: -12px;
+    border-color: @primary;
+    transform: scaleX(1.04);
+    left: -17px;
+  }
+}
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -940,4 +940,56 @@ text.slicetext {
 
 .markdown img {
   max-width: 100%;
+}
+
+.loading-indicator {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: -50px 0 0 -50px; // center
+  width: 100px;
+  height: 100px;
+  transition-duration: 150ms;
+  transition-timing-function: linear;
+  transition-property: opacity, transform;
+
+  #css-logo {
+    animation: hover 2s infinite;
+  }
+
+  #shadow {
+    width: 33px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: black;
+    opacity: 0.25;
+    display: block;
+    position: absolute;
+    left: 34px;
+    top: 115px;
+    animation: shadow 2s infinite;
+  }
+
+  @keyframes hover {
+    50% {
+      transform: translateY(-5px);
+    }
+  }
+  @keyframes shadow {
+    50% {
+      transform: scaleX(0.9);
+      opacity: 0.2;
+    }
+  }
+}
+
+// hide indicator when app-view has content
+app-view:not(:empty) ~ .loading-indicator {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+
+  * {
+    animation: none !important;
+  }
 }
diff --git a/client/app/index.html b/client/app/index.html
@@ -26,6 +26,23 @@
   <body ng-class="bodyClass">
     <section>
       <app-view></app-view>
+      <div class="loading-indicator">
+        <div id="css-logo">
+          <div id="circle">
+            <div></div>
+          </div>
+          <div id="point">
+            <div></div>
+          </div>
+          <div id="bars">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+          </div>
+        </div>
+        <div id="shadow"></div>
+      </div>
     </section>
   </body>
 </html>
diff --git a/client/app/multi_org.html b/client/app/multi_org.html
@@ -26,6 +26,23 @@
   <body ng-class="bodyClass">
     <section>
       <app-view></app-view>
+      <div class="loading-indicator">
+        <div id="css-logo">
+          <div id="circle">
+            <div></div>
+          </div>
+          <div id="point">
+            <div></div>
+          </div>
+          <div id="bars">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+          </div>
+        </div>
+        <div id="shadow"></div>
+      </div>
     </section>
   </body>
 </html>