progress circle demo

components/progress/demo/circle.md

@@ -0,0 +1,19 @@
+# Circle 用法
+
+- order: 0
+
+Progress Circle用法
+
+---
+
+````jsx
+var Circle = antd.Progress.Circle;
+
+React.render(
+  <div>
+    <Circle percent="30" width="200" strokeWidth="4" />
+    <Circle percent="70" width="200" strokeWidth="4" status="exception" />
+    <Circle percent="100" width="200" strokeWidth="4" />
+  </div>
+  , document.getElementById('components-progress-demo-circle'));
+````

components/progress/index.jsx

@@ -66,37 +66,52 @@ var Line = React.createClass({
 var Circle = React.createClass({
   getDefaultProps: function () {
     return {
-      width: "100%",
       percent: 0,
-      strokeWidth: 1,
-      status: "normal"
+      strokeWidth: 2,
+      status: "normal" // exception
     }
   },
   render() {
+    var statusColorMap = {
+      "normal": "#3FC7FA",
+      "exception": "#FE8C6A",
+      "success": "#85D262"
+    };
+
+    if (parseInt(this.props.percent) === 100) {
+      this.props.status = 'success'
+    }
+
     var style = {
       "width": this.props.width,
       "height": this.props.width
     }
+    var wrapStyle = {
+      "font-size": this.props.width
+    }
+    var textStyle = {
+      "color": statusColorMap[this.props.status]
+    }
     var progressInfo
-    if (this.props.status === 'normal') {
+    if (this.props.status === 'exception') {
       progressInfo = (
-        <i className="anticon anticon-check-circle"></i>
+        <span style={textStyle} className="ant-progress-circle-text">
+          <i className="anticon anticon-exclamation"></i>
+        </span>
       )
-    } else {
+    }else {
       progressInfo = (
-        <span className="ant-progress-line-text">{this.props.percent}%</span>
+        <span className="ant-progress-circle-text">{this.props.percent}%</span>
       )
     }
 
-    var statusColorMap = {
-      "normal": "#3FC7FA",
-      "exception": "#FE8C6A"
-    };
     return (
-      <div className="ant-progress-circle-wrap" style={style}>
-        <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+      <div className="ant-progress-circle-wrap" style={wrapStyle}>
+        <div className="ant-progress-circle-inner" style={style}>
+          <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
                         strokeColor={statusColorMap[this.props.status]}/>
-        {progressInfo}
+          {progressInfo}
+        </div>
       </div>
     );
   }

style/components/progress.less

@@ -19,4 +19,20 @@
       font-size: 1.5em;
     }
   }
+
+  &-circle-inner {
+    position: relative;
+  }
+  &-circle-text {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: 0.5em;
+    text-align: center;
+
+    .anticon {
+      font-size: 0.5em;
+    }
+  }
 }