progress bar style

components/progress/demo/line-mini.md

@@ -8,9 +8,12 @@
 
 ````jsx
 var Progress = antd.Progress.Line;
+var style = {
+  width: "170px"
+}
 
 React.render(
-  <div>
+  <div style={style}>
     <Progress percent="30" strokeWidth="5" />
     <Progress percent="70" strokeWidth="5" status="exception" />
     <Progress percent="100" strokeWidth="5" />

components/progress/index.jsx

@@ -11,14 +11,6 @@ const statusColorMap = {
 };
 
 var Line = React.createClass({
-  propTypes: {
-    percent: function(props, propName){
-      if ( props[propName] < 0 && props[propName] > 100) {
-        return new Error('Validation failed!');
-      }
-    },
-    strokeWidth: React.PropTypes.string
-  },
   getDefaultProps() {
     return {
       percent: 0,
@@ -87,24 +79,20 @@ var Circle = React.createClass({
 
     var style = {
       'width': props.width,
-      'height': props.width
-    };
-    var wrapStyle = {
+      'height': props.width,
       'fontSize': props.width * 0.16 + 6
-    };
-    var textStyle = {
-      'color': statusColorMap[props.status]
+
     };
     var progressInfo;
     if (props.status === 'exception') {
       progressInfo = (
-        <span style={textStyle} className={prefixCls + '-circle-text'}>
+        <span className={prefixCls + '-circle-text'}>
           <i className='anticon anticon-exclamation'></i>
         </span>
       );
     } else if (props.status === 'success') {
       progressInfo = (
-        <span style={textStyle} className={prefixCls + '-circle-text'}>
+        <span className={prefixCls + '-circle-text'}>
           <i className="anticon anticon-check"></i>
         </span>
       );
@@ -115,7 +103,7 @@ var Circle = React.createClass({
     }
 
     return (
-      <div className={prefixCls + '-circle-wrap'} style={wrapStyle}>
+      <div className={prefixCls + '-circle-wrap status-' + props.status} >
         <div className={prefixCls + '-circle-inner'} style={style}>
           <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
             strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />

style/components/progress.less

@@ -4,6 +4,10 @@
 @statusSuccess: #85D262;
 
 .@{prefixProgressClass} {
+  &-line-wrap,
+  &-circle-wrap {
+    display: inline-block;
+  }
   &-line-wrap {
     width: 100%;
     font-size: 12px;
@@ -72,4 +76,14 @@
       font-size: 14/12em;
     }
   }
+  &-circle-wrap.status-exception {
+    .@{prefixProgressClass}-circle-text {
+      color: @statusException;
+    }
+  }
+  &-circle-wrap.status-success {
+    .@{prefixProgressClass}-circle-text {
+      color: @statusSuccess;
+    }
+  }
 }