Replace loading spinner with bar across top of screen

Replace the loading spinner in the center of the screen with a thin red bar at the top of the screen. This indicator is modeled after the one used by GitHub (a thin blue bar) and PDF.js (a slightly thicker white bar).
hypothesis · May 4, 2021 · 8f0cebb · 8f0cebb
1 parent aa1f98a
commit 8f0cebb
Showing 1 changed file with 62 additions and 56 deletions.
diff --git a/via/templates/proxy.html.jinja2 b/via/templates/proxy.html.jinja2
@@ -24,60 +24,75 @@
       padding: 0;
     }
 
-    .center {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+    :root {
+      --color-brand: #bd1c2b;
     }
 
-    /* Loading spinner */
-    .spinner__icon {
-      height: 28px;
-      padding-top: 2px;
-      width: 24px;
-    }
-    .spinner__text {
-      margin-top: 116px;
-    }
-    .spinner__stationary-ring {
-      border: 3px solid #dbdbdb;
-      border-radius: 50%;
-      height: 74px;
-      width: 74px;
+    .loading-bar {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: 5px;
+      background-color: var(--color-brand);
+
+      /* Loading bar is initially at 0% progress. */
+      width: 0px;
     }
-    .spinner__moving-ring {
-      animation-duration: 1s;
+
+    /* Increase loading "progress" once we decide to show the loading indicator.
+       Not an accurate representation, but it looks good.
+    */
+    .loading-bar.is-loading {
+      animation: loading-bar-begin;
+      animation-duration: .3s;
       animation-fill-mode: forwards;
-      animation-iteration-count: infinite;
-      animation-name: moving-ring;
-      animation-timing-function: linear;
-      border-left: 3px solid #a6a6a6;
-      border-radius: 100% 0 0 0;
-      border-top: 3px solid #a6a6a6;
-      height: 37px;
-      transform: translate(-3px, -3px);
-      transform-origin: bottom right;
-      width: 37px;
     }
-    @keyframes moving-ring {
+
+    @keyframes loading-bar-begin {
       from {
-        transform: translate(-3px, -3px) rotate(0deg);
+        width: 0%;
+        opacity: 0.0;
       }
+
+      /* Same as start state of `loading-bar-finish` animation */
       to {
-        transform: translate(-3px, -3px) rotate(359deg);
+        width: 20%;
+        opacity: 1.0;
       }
     }
 
-    .js-loading-indicator {
-      opacity: 0;
-      transition: opacity 0.2s;
-    }
-    .js-loading-indicator.is-loading {
-      opacity: 1.0;
+    /* Once the content has loaded, set progress to 100% and then fade out the
+       progress bar.
+    */
+    .loading-bar.is-done {
+      animation: loading-bar-finish;
+      animation-duration: 1s;
+      animation-fill-mode: forwards;
     }
-    .js-loading-indicator.is-done {
-      opacity: 0.0;
+
+    @keyframes loading-bar-finish {
+      /* Same as end state of `loading-bar-begin` animation */
+      0% {
+        width: 20%;
+        opacity: 1.0;
+      }
+
+      20% {
+        width: 100%;
+        opacity: 1.0;
+      }
+
+      70% {
+        width: 100%;
+        opacity: 0.0;
+      }
+
+      100% {
+        width: 100%;
+        opacity: 0.0;
+      }
     }
   </style>
 
@@ -128,22 +143,13 @@
   <body>
     <iframe class="js-content-frame proxied-content-iframe" src={{ src }}></iframe>
 
-    {# Hypothesis logo loading indicator.
+    {# Loading indicator.
 
-       This is not essential in Chrome and Firefox as the tab's loading indicator will remain
-       visible while the iframe loads. In Safari however there is no indication that anything is
-       loading once the main frame has loaded.
+       This is needed mainly in Safari where there is no indication that anything
+       is loading once the main frame has loaded. Chrome and Safari continue to
+       display the tab in a loading state until the iframe has finished loading.
     #}
-    <div class="js-loading-indicator">
-      <div class="center spinner__stationary-ring">
-        <svg alt="Hypothesis logo" class="center spinner_icon" width="24" height="28" viewBox="0 0 24 28">
-          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-              <path d="M0,2.00494659 C0,0.897645164 0.897026226,0 2.00494659,0 L21.9950534,0 C23.1023548,0 24,0.897026226 24,2.00494659 L24,21.9950534 C24,23.1023548 23.1029738,24 21.9950534,24 L2.00494659,24 C0.897645164,24 0,23.1029738 0,21.9950534 L0,2.00494659 Z M9,24 L12,28 L15,24 L9,24 Z M7.00811294,4 L4,4 L4,20 L7.00811294,20 L7.00811294,15.0028975 C7.00811294,12.004636 8.16824717,12.0097227 9,12 C10,12.0072451 11.0189302,12.0606714 11.0189302,14.003477 L11.0189302,20 L14.0270431,20 L14.0270431,13.1087862 C14.0270433,10 12,9.00309038 10,9.00309064 C8.01081726,9.00309091 8,9.00309086 7.00811294,11.0019317 L7.00811294,4 Z M19,19.9869002 C20.1045695,19.9869002 21,19.0944022 21,17.9934501 C21,16.892498 20.1045695,16 19,16 C17.8954305,16 17,16.892498 17,17.9934501 C17,19.0944022 17.8954305,19.9869002 19,19.9869002 Z" fill="#A6A6A6"></path>
-          </g>
-        </svg>
-        <div class="spinner__moving-ring"></div>
-      </div>
-    </div>
+    <div class="js-loading-indicator loading-bar">
     <script>
       /**
        * Show the loading spinner after a short delay. The delay avoids a flash