2 files changed, 103 insertions, 3 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 09fc5703..24d143fc 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -45,6 +45,12 @@
     --sidebar-button-icon-size-no-units: 16;
     --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
 
+    --progress-bar-height-no-units: 4;
+    --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));
+    --progress-bar-active-transition-duration: 0.125s;
+    --progress-bar-active-transition-start-delay: 0.0625s;
+    --progress-bar-animation-duration: 2s;
+
     /* Colors */
     --background-color: #ffffff;
     --glossary-image-background-color: #eeeeee;
@@ -88,6 +94,9 @@
 
     --scrollbar-thumb-color: #c1c1c1;
     --scrollbar-track-color: #f1f1f1;
+
+    --progress-bar-track-color: #cccccc;
+    --progress-bar-indicator-color: #0275d8;
 }
 :root[data-yomichan-theme=dark] {
     /* Colors */
@@ -133,6 +142,9 @@
 
     --scrollbar-thumb-color: #444444;
     --scrollbar-track-color: #2f2f2f;
+
+    --progress-bar-track-color: #3a3a3a;
+    --progress-bar-indicator-color: #0275d8;
 }
 
 
@@ -1004,3 +1016,76 @@ button.action-button {
 .kanji-glossary {
     color: var(--dark-text-color);
 }
+
+
+/* Progress bar */
+@keyframes progress-bar-indeterminant1a {
+    0% { left: 0; }
+    25% { left: 0; }
+    75% { left: 100%; }
+    100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant1b {
+    0% { right: 100%; }
+    50% { right: 0; }
+    100% { right: 0; }
+}
+@keyframes progress-bar-indeterminant2a {
+    0% { left: 0; }
+    25% { left: 0; }
+    100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant2b {
+    0% { right: 100%; }
+    75% { right: 0; }
+    100% { right: 0; }
+}
+.progress-bar-indeterminant {
+    display: block;
+    width: 100%;
+    height: 0;
+    background-color: var(--progress-bar-indicator-color);
+    position: relative;
+    transition:
+        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),
+        background-color var(--progress-bar-active-transition-duration) linear;
+}
+.progress-bar-indeterminant[data-active=true] {
+    height: var(--progress-bar-height);
+    background-color: var(--progress-bar-track-color);
+    transition:
+        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),
+        background-color 0s linear;
+}
+.progress-bar-indeterminant[hidden]:not([data-active=true]) {
+    display: none;
+}
+.progress-bar-indeterminant::before,
+.progress-bar-indeterminant::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 100%;
+    background-color: var(--progress-bar-indicator-color);
+    animation: none;
+}
+.progress-bar-indeterminant:not([hidden])::before {
+    animation:
+        progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),
+        progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);
+}
+.progress-bar-indeterminant:not([hidden])::after {
+    animation:
+        progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)),
+        progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration));
+}
+.top-progress-bar-container {
+    position: sticky;
+    top: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: 10;
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index cdff9389..7068d424 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -34,7 +34,6 @@
 class Display extends EventDispatcher {
     constructor() {
         super();
-        this._spinner = document.querySelector('#spinner');
         this._container = document.querySelector('#definitions');
         this._definitions = [];
         this._optionsContext = {depth: 0, url: window.location.href};
@@ -69,6 +68,8 @@ class Display extends EventDispatcher {
         this._defaultTitleMaxLength = 1000;
         this._fullQuery = '';
         this._documentUtil = new DocumentUtil();
+        this._progressIndicator = document.querySelector('#progress-indicator');
+        this._progressIndicatorTimer = null;
         this._progressIndicatorVisible = new DynamicProperty(false);
         this._queryParserVisible = false;
         this._queryParserVisibleOverride = null;
@@ -563,8 +564,22 @@ class Display extends EventDispatcher {
     }
 
     _onProgressIndicatorVisibleChanged({value}) {
-        if (this._spinner === null) { return; }
-        this._spinner.hidden = !value;
+        if (this._progressIndicatorTimer !== null) {
+            clearTimeout(this._progressIndicatorTimer);
+            this._progressIndicatorTimer = null;
+        }
+
+        if (value) {
+            this._progressIndicator.hidden = false;
+            getComputedStyle(this._progressIndicator).getPropertyValue('display'); // Force update of CSS display property, allowing animation
+            this._progressIndicator.dataset.active = 'true';
+        } else {
+            this._progressIndicator.dataset.active = 'false';
+            this._progressIndicatorTimer = setTimeout(() => {
+                this._progressIndicator.hidden = true;
+                this._progressIndicatorTimer = null;
+            }, 250);
+        }
     }
 
     _onWindowFocus() {