diff --git a/script.js b/script.js
index 2d49f98..59d28bc 100644
--- a/script.js
+++ b/script.js
@@ -582,16 +582,16 @@ const ScrollProgress = {
     if (this.isModalActive) return;
     const scrollTop = window.scrollY;
     const docHeight = this.cachedDocHeight - this.cachedWindowHeight;
-    const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
-    this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+    const progress = docHeight > 0 ? (scrollTop / docHeight) : 0;
+    this.bar.style.transform = `scaleX(${Math.max(0, Math.min(1, progress))})`;
   },
 
   updateModal() {
     if (!this.isModalActive || !this.modalContent) return;
     const scrollTop = this.modalContent.scrollTop;
     const scrollHeight = this.modalContent.scrollHeight - this.modalContent.clientHeight;
-    const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
-    this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+    const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) : 0;
+    this.bar.style.transform = `scaleX(${Math.max(0, Math.min(1, progress))})`;
   }
 };
 
diff --git a/styles.css b/styles.css
index 83da5bc..c3d242d 100644
--- a/styles.css
+++ b/styles.css
@@ -594,9 +594,11 @@ button {
   left: 0;
   height: 2px;
   background: var(--accent);
-  width: 0%;
+  width: 100%;
+  transform-origin: left;
+  transform: scaleX(0);
   z-index: 10001;
-  transition: width 0.1s linear;
+  transition: transform 0.1s linear;
 }
 
 /* === Gallery === */