diff --git a/src/progress/index.js b/src/progress/index.js
index 085168a83..207df31f3 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -60,17 +60,18 @@ export default createComponent({
 
     const pivotStyle = {
       color: this.textColor,
+      left: `${(this.progressWidth - this.pivotWidth) * percentage / 100}px`,
       background: this.pivotColor || background
     };
 
     const portionStyle = {
       background,
-      width: ((this.progressWidth - this.pivotWidth) * percentage) / 100 + 'px'
+      width: (this.progressWidth * percentage) / 100 + 'px'
     };
 
     return (
       <div class={bem()}>
-        <span class={bem('portion', { 'with-pivot': showPivot })} style={portionStyle}>
+        <span class={bem('portion')} style={portionStyle}>
           {showPivot && (
             <span ref="pivot" style={pivotStyle} class={bem('pivot')}>
               {text}
diff --git a/src/progress/index.less b/src/progress/index.less
index 0165987be..6196c4823 100644
--- a/src/progress/index.less
+++ b/src/progress/index.less
@@ -11,19 +11,13 @@
     left: 0;
     height: 100%;
     border-radius: inherit;
-
-    &--with-pivot {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
   }
 
   &__pivot {
     position: absolute;
     top: 50%;
-    right: 0;
     box-sizing: border-box;
-    min-width: 2em;
+    min-width: 3.6em;
     padding: @progress-pivot-padding;
     font-size: @progress-pivot-font-size;
     line-height: @progress-pivot-line-height;
@@ -31,6 +25,6 @@
     word-break: keep-all;
     background-color: @progress-pivot-background-color;
     border-radius: 1em;
-    transform: translate(100%, -50%);
+    transform: translate(0, -50%);
   }
 }
diff --git a/src/progress/test/__snapshots__/demo.spec.js.snap b/src/progress/test/__snapshots__/demo.spec.js.snap
index 18b47e855..2883cf0ef 100644
--- a/src/progress/test/__snapshots__/demo.spec.js.snap
+++ b/src/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(202, 202, 202);">50%</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(242, 130, 106);">橙色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(238, 10, 36);">红色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221);">紫色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
   </div>
 </div>
 `;
diff --git a/src/progress/test/__snapshots__/index.spec.js.snap b/src/progress/test/__snapshots__/index.spec.js.snap
index e54cd5fd8..a68821fd0 100644
--- a/src/progress/test/__snapshots__/index.spec.js.snap
+++ b/src/progress/test/__snapshots__/index.spec.js.snap
@@ -2,4 +2,4 @@
 
 exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`;
 
-exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
+exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">test</span></span></div>`;