Closes #401 - shimmer effect.

gut Closes
BrowserBox · Oct 15, 2023 · 1a235be · 1a235be
1 parent a3661ce
commit 1a235be
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/src/public/voodoo/src/components/bb-top-bar/markup.html b/src/public/voodoo/src/components/bb-top-bar/markup.html
@@ -15,12 +15,12 @@
       ` : F`
         <span class=wide-word>1&nbsp;download</span>
       `}
-      <meter class="download-meter" 
+      <progress class="download-meter" 
         min=0 
         step=0.01
         max="${Math.max(_host.totalFiles, 1)}"
         value="${_host.progressValue}"
-      ></meter>       
+      ></progress>       
       <span class="download-mb">
         ${_host.megabytesReceived} MB
       </span>

diff --git a/src/public/voodoo/src/components/bb-top-bar/script.js b/src/public/voodoo/src/components/bb-top-bar/script.js
@@ -16,6 +16,7 @@ class BBTopBar extends Base {
 
   updateDownloadStatus(event) {
     clearTimeout(this.vanishTimer);
+    this.animateProgress();
     const {state: data } = this;
     const { guid, state, receivedBytes, totalBytes } = event;
     let newStart = false;
@@ -77,6 +78,45 @@ class BBTopBar extends Base {
     }
   }
 
+  animateProgress() {
+    if ( ! this.shadowRoot ) return;
+
+    const progress = this.shadowRoot.querySelector('progress');
+
+    if ( !progress || progress.animating ) return;
+
+    progress.animating = true;
+
+    const positionStep = 2;
+    const rotationStep = 1;
+    let position = 0;
+    let rotation = 0;
+
+    // Start the animation
+    requestAnimationFrame(animate);
+
+    function animate() {
+      // Update the position and rotation
+      position += positionStep;
+      rotation += rotationStep;
+
+      if (position >= 200) {
+        position = -100; // Reset position
+      }
+
+      if (rotation >= 360) {
+        rotation = 0; // Reset rotation
+      }
+
+      // Update CSS variables
+      progress.style.setProperty('--position', `${position}%`);
+      progress.style.setProperty('--rotation', `${rotation}deg`);
+
+      // Schedule the next frame
+      requestAnimationFrame(animate);
+    }
+  }
+
   resetDownloads() {
     this.downloadState = {
       activeDownloads: 0,

diff --git a/src/public/voodoo/src/components/bb-top-bar/style.css b/src/public/voodoo/src/components/bb-top-bar/style.css
@@ -18,23 +18,37 @@
 }
 
 .download-meter {
-  flex: 1;
+  flex-grow: 1;
   max-width: 100%;
-  height: 8px;
-  max-height: 8px;
-  border: none;
-  padding: 0;
-  margin: 0;
-  -webkit-appearance: none;
+  width: 100px;
 }
 
-meter::-webkit-meter-optimum-value {
-  max-height: 8px;
+progress {
+  appearance: none;
   -webkit-appearance: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  background: green;
+  width: 100%;
+  height: 0.8rem;
+  line-height: 1.3;
+  background: none;
+  --position: 0%;
+  --rotation: 45deg;
+}
+
+/* Chrome */
+progress::-webkit-progress-bar {
+  background: transparent;
+}
+
+progress::-webkit-progress-value {
+  background: linear-gradient(var(--rotation), rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+  background-size: 200% 100%;
+  background-position: var(--position) 0;
+}
+
+progress::-moz-progress-bar {
+  background: linear-gradient(var(--rotation), rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
+  background-size: 200% 100%;
+  background-position: var(--position) 0;
 }
 
 @media screen and (max-width: 600px) {
@@ -50,19 +64,4 @@ meter::-webkit-meter-optimum-value {
   }
 }
 
-/* Shimmer effect */
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.shimmering {
-  animation: shimmer 1.5s ease infinite;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
-  background-size: 200% 100%;
-}