progress circle demo

components/progress/demo/circle.md

@@ -11,9 +11,9 @@ 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" />
+    <Circle percent="30" width="150" strokeWidth="4" />
+    <Circle percent="70" width="150" strokeWidth="4" status="exception" />
+    <Circle percent="100" width="150" strokeWidth="4" />
   </div>
   , document.getElementById('components-progress-demo-circle'));
 ````

components/progress/index.jsx

@@ -87,7 +87,7 @@ var Circle = React.createClass({
       "height": this.props.width
     }
     var wrapStyle = {
-      "font-size": this.props.width
+      "font-size": this.props.width * 0.3
     }
     var textStyle = {
       "color": statusColorMap[this.props.status]

style/components/progress.less

@@ -20,19 +20,22 @@
     }
   }
 
+
   &-circle-inner {
     position: relative;
+    line-height: 1;
   }
   &-circle-text {
     display: block;
     position: absolute;
     width: 100%;
-    height: 100%;
-    font-size: 0.5em;
     text-align: center;
+    line-height: 1;
+    top: 33%;
+    left: 0;
 
     .anticon {
-      font-size: 0.5em;
+      font-size: 1em;
     }
   }
 }