Progress add new prop: text-inside

examples/routers/progress.vue

@@ -11,6 +11,10 @@
         <Progress  :percent="65" status="wrong"></Progress>
         <Progress  :percent="100"></Progress>
         <Progress  :percent="25" hide-info></Progress>
+
+        <Divider></Divider>
+
+        <Progress :percent="10" :stroke-width="20" text-inside></Progress>
     </div>
 </template>
 <script>

src/components/progress/progress.vue

@@ -2,10 +2,10 @@
     <div :class="wrapClasses">
         <div :class="outerClasses">
             <div :class="innerClasses">
-                <div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div>
+                <div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
             </div>
         </div>
-        <span v-if="!hideInfo" :class="textClasses">
+        <span v-if="!hideInfo && !textInside" :class="textClasses">
             <slot>
                 <span v-if="isStatus" :class="textInnerClasses">
                     <Icon :type="statusIcon"></Icon>
@@ -55,6 +55,10 @@
             },
             strokeColor: {
                 type: String
+            },
+            textInside: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -108,7 +112,7 @@
                     `${prefixCls}`,
                     `${prefixCls}-${this.currentStatus}`,
                     {
-                        [`${prefixCls}-show-info`]: !this.hideInfo,
+                        [`${prefixCls}-show-info`]: !this.hideInfo && !this.textInside,
                         [`${prefixCls}-vertical`]: this.vertical
 
                     }

src/styles/components/progress.less

@@ -35,6 +35,13 @@
         border-radius: 100px;
         vertical-align: middle;
         position: relative;
+        &-text{
+            display: inline-block;
+            vertical-align: middle;
+            color: #fff;
+            font-size: 12px;
+            margin: 0 6px;
+        }
     }
     &-vertical &-inner {
         height: 100%;
@@ -52,10 +59,17 @@
     }
 
     &-bg {
+        text-align: right;
         border-radius: 100px;
         background-color: @primary-color;
         transition: all @transition-time linear;
         position: relative;
+        &:after{
+            content: '';
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
     }
     &-success-bg{
         border-radius: 100px;