diff --git a/src/vs/base/browser/ui/progressbar/progressbar.css b/src/vs/base/browser/ui/progressbar/progressbar.css
index 64368d699b0..55e6a1a6963 100644
--- a/src/vs/base/browser/ui/progressbar/progressbar.css
+++ b/src/vs/base/browser/ui/progressbar/progressbar.css
@@ -42,7 +42,10 @@
  * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
  * that container. Since translateX is relative to the progress bit size, we have to multiple it with
  * its relative size to the parent container:
- *  50%: 50 * 50 = 2500%
- * 100%: 50 * 100 - 50 (do not overflow): 4950%
+ * parent width: 5000%
+ *    bit width: 100%
+ * translateX should be as follow:
+ *  50%: 5000% * 50% - 50% (set to center) = 2450%
+ * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
  */
-@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } }
+@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }