diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md index 7ef2562cd4..02ae6cd8ba 100644 --- a/components/progress/demo/circle.md +++ b/components/progress/demo/circle.md @@ -11,9 +11,9 @@ var Circle = antd.Progress.Circle; React.render(
- - - + + +
, document.getElementById('components-progress-demo-circle')); ```` diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 8acf417078..29c0fc09d2 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -11,9 +11,9 @@ var Line = antd.Progress.Line; React.render(
- - - + + +
, document.getElementById('components-progress-demo-line')); ```` diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 1109a31558..1c73d6b2be 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -7,8 +7,9 @@ var React = require('react'); var Line = React.createClass({ getDefaultProps: function () { return { + width: 300, percent: 0, - strokeWidth: 4, + strokeWidth: 3, status: 'normal' // exception }; }, @@ -26,8 +27,9 @@ var Line = React.createClass({ var style = { 'width': this.props.width }; - var wrapStyle = { - 'font-size': this.props.width / 100 * this.props.strokeWidth + var fontSize = (this.props.width / 100 * this.props.strokeWidth); + var iconStyle = { + 'font-size': (fontSize < 14) ? 14 : fontSize }; var textStyle = { 'color': statusColorMap[this.props.status] @@ -36,13 +38,14 @@ var Line = React.createClass({ if (this.props.status === 'exception') { progressInfo = ( - + ); + } else if(this.props.status === 'success'){ progressInfo = ( - + ); }else { @@ -52,7 +55,7 @@ var Line = React.createClass({ } return ( -
+
@@ -66,6 +69,7 @@ var Line = React.createClass({ var Circle = React.createClass({ getDefaultProps: function () { return { + width: 150, percent: 0, strokeWidth: 4, status: 'normal' // exception @@ -87,7 +91,7 @@ var Circle = React.createClass({ 'height': this.props.width }; var wrapStyle = { - 'font-size': this.props.width * 0.3 + 'font-size': this.props.width * 0.2 }; var textStyle = { 'color': statusColorMap[this.props.status] @@ -99,6 +103,12 @@ var Circle = React.createClass({ ); + }else if(this.props.status === 'suucess'){ + progressInfo = ( + + + + ); }else { progressInfo = ( {this.props.percent}% diff --git a/style/components/progress.less b/style/components/progress.less index b523f53ab2..0e8e1f9320 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -5,6 +5,10 @@ &-circle-wrap { display: inline-block; } + + &-line-wrap { + font-size: 12px; + } &-line-inner { display: inline-block; @@ -20,7 +24,7 @@ line-height: 1; .anticon { - font-size: 1.5em; + font-size: 1.2em; } } @@ -35,11 +39,11 @@ width: 100%; text-align: center; line-height: 1; - top: 33%; + top: 38%; left: 0; .anticon { - font-size: 1em; + font-size: 14/12em; } } }