Add props format for progress

components/progress/demo/circle-mini.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-import { Progress } from 'antd';
+import { Progress, Icon } from 'antd';
 const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
     <ProgressCircle percent={30} width={80} />
-    <ProgressCircle percent={70} width={80} status="exception" />
+    <ProgressCircle percent={70} width={80} status="exception" format={<Icon type="exclamation" />} />
     <ProgressCircle percent={100} width={80} />
   </div>
   , document.getElementById('components-progress-demo-circle-mini'));

components/progress/demo/circle.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-import { Progress } from 'antd';
+import { Progress, Icon } from 'antd';
 const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
     <ProgressCircle percent={30} />
-    <ProgressCircle percent={70} status="exception" />
+    <ProgressCircle percent={70} status="exception" format={<Icon type="exclamation" />} />
     <ProgressCircle percent={100} />
   </div>
   , document.getElementById('components-progress-demo-circle'));

components/progress/demo/line-mini.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-import { Progress } from 'antd';
+import { Progress, Icon } from 'antd';
 const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div style={{ width: 170 }}>
     <ProgressLine percent={30} strokeWidth={5} />
     <ProgressLine percent={50} strokeWidth={5} status="active" />
-    <ProgressLine percent={70} strokeWidth={5} status="exception" />
+    <ProgressLine percent={70} strokeWidth={5} status="exception" format={<Icon type="exclamation" />} />
     <ProgressLine percent={100} strokeWidth={5} />
   </div>
 , document.getElementById('components-progress-demo-line-mini'));

components/progress/demo/line.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-import { Progress } from 'antd';
+import { Progress, Icon } from 'antd';
 const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div>
     <ProgressLine percent={30} />
     <ProgressLine percent={50} status="active" />
-    <ProgressLine percent={70} status="exception" />
+    <ProgressLine percent={70} status="exception" format={<Icon type="exclamation" />} />
     <ProgressLine percent={100} />
     <ProgressLine percent={50} showInfo={false} />
   </div>

components/progress/index.jsx

@@ -16,14 +16,15 @@ let Line = React.createClass({
     status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
     showInfo: React.PropTypes.bool,
     percent: React.PropTypes.number,
-    strokeWidth: React.PropTypes.number
+    strokeWidth: React.PropTypes.number,
   },
   getDefaultProps() {
     return {
       percent: 0,
       strokeWidth: 10,
       status: 'normal', // exception active
-      showInfo: true
+      format: '${percent}%',
+      showInfo: true,
     };
   },
   render() {
@@ -35,22 +36,23 @@ let Line = React.createClass({
 
     let progressInfo;
     let fullCls = '';
+    const text = (typeof props.format === 'string') ?
+      props.format.replace('${percent}', props.percent) : props.format;
+
     if(props.showInfo === true){
       if (props.status === 'exception') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>
-            <Icon type="exclamation-circle" />
-          </span>
+          <span className={prefixCls + '-line-text'}>{text}</span>
         );
       } else if (props.status === 'success') {
         progressInfo = (
           <span className={prefixCls + '-line-text'}>
-            <Icon type="exclamation-circle" />
+            <Icon type="check" />
           </span>
         );
       } else {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>{props.percent}%</span>
+          <span className={prefixCls + '-line-text'}>{text}</span>
         );
       }
     } else {
@@ -79,14 +81,15 @@ let Circle = React.createClass({
     status: React.PropTypes.oneOf(['normal', 'exception', 'success']),
     percent: React.PropTypes.number,
     strokeWidth: React.PropTypes.number,
-    width: React.PropTypes.number
+    width: React.PropTypes.number,
   },
   getDefaultProps: function () {
     return {
       width: 132,
       percent: 0,
       strokeWidth: 6,
-      status: 'normal' // exception
+      format: '${percent}%',
+      status: 'normal', // exception
     };
   },
   render() {
@@ -102,11 +105,11 @@ let Circle = React.createClass({
       'fontSize': props.width * 0.16 + 6
     };
     let progressInfo;
+    const text = (typeof props.format === 'string') ?
+      props.format.replace('${percent}', props.percent) : props.format;
     if (props.status === 'exception') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>
-          <Icon type="exclamation" />
-        </span>
+        <span className={prefixCls + '-circle-text'}>{text}</span>
       );
     } else if (props.status === 'success') {
       progressInfo = (
@@ -116,7 +119,7 @@ let Circle = React.createClass({
       );
     } else {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>{props.percent}%</span>
+        <span className={prefixCls + '-circle-text'}>{text}</span>
       );
     }
 

components/progress/index.md

@@ -19,18 +19,20 @@
 
 ## Progress Line
 
-| 参数     | 说明           | 类型     | 默认值       |
-|----------|---------------|----------|-------------|
-| percent  | 百分比         | number   | 0           |
-| status   | 状态，有两个值normal、exception、active三种状态 | string   | normal |
-| strokeWidth | 进度条线的宽度，单位是px | number | 1           |
-| showInfo | 是否显示进度数值和状态图标 | bool | true           |
+| 参数     | 说明           | 类型     | 默认值        |
+|----------|----------------|----------|---------------|
+| percent  | 百分比         | number   | 0             |
+| format   | 数字的模板     | string   | "${percent}%" |
+| status   | 状态，可选：normal、exception、active | string   | normal |
+| strokeWidth | 进度条线的宽度，单位是px | number | 1  |
+| showInfo | 是否显示进度数值和状态图标 | bool | true  |
 
 ### Progress Circle
 
-| 参数     | 说明           | 类型     | 默认值       |
-|----------|---------------|----------|-------------|
-| percent  | 百分比         | number   | 0           |
-| status   | 状态，有两个值normal、exception | string   | normal |
+| 参数     | 说明           | 类型     | 默认值        |
+|----------|----------------|----------|---------------|
+| percent  | 百分比         | number   | 0             |
+| format   | 数字的模板     | string   | "${percent}%" |
+| status   | 状态，可选：normal、exception | string  | normal |
 | strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1           |
 | width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |

style/components/progress.less

@@ -32,7 +32,7 @@
   }
   &-line-text {
     position: absolute;
-    bottom: 0;
+    top: 0;
     right: 0;
     width: 35px;
     text-align: left;
@@ -40,6 +40,7 @@
     margin-left: 10px;
 
     .anticon {
+      font-weight: bold;
       font-size: 12px;
     }
   }