diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index c46c87a3f..1e21c642a 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -200,27 +200,29 @@ canvas {
 #loadingBar .progress {
   position: absolute;
   left: 0;
-  width: var(--progressBar-percent);
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: 0 0;
   height: 100%;
   background-color: rgba(221, 221, 221, 1);
   overflow: hidden;
-  transition: width 200ms;
+  transition: transform 200ms;
 }
 
 @keyframes progressIndeterminate {
   0% {
-    left: 0;
+    transform: translateX(0%);
   }
   50% {
-    left: 100%;
+    transform: translateX(100%);
   }
   100% {
-    left: 100%;
+    transform: translateX(100%);
   }
 }
 
 #loadingBar .progress.indeterminate {
-  width: 100%;
+  transform: none;
   background-color: rgba(153, 153, 153, 1);
   transition: none;
 }
diff --git a/web/viewer.css b/web/viewer.css
index 612886994..a8bad89cb 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -362,24 +362,26 @@ select {
   position: absolute;
   top: 0;
   left: 0;
-  width: var(--progressBar-percent);
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: 0 0;
   height: 100%;
   background-color: var(--progressBar-color);
   overflow: hidden;
-  transition: width 200ms;
+  transition: transform 200ms;
 }
 
 @keyframes progressIndeterminate {
   0% {
-    left: -142px;
+    transform: translateX(-142px);
   }
   100% {
-    left: 0;
+    transform: translateX(0);
   }
 }
 
 #loadingBar .progress.indeterminate {
-  width: 100%;
+  transform: none;
   background-color: var(--progressBar-indeterminate-bg-color);
   transition: none;
 }