Merge pull request #96 from ant-design/progress-bar

Progress bar
2025-01-18 06:03:38 +08:00 · 2015-07-30 16:12:49 +08:00 · 2015-07-30 16:12:49 +08:00 · 714c5faa1c
commit 714c5faa1c
parent 8f39e43f72 1bb6711a00
5 changed files with 121 additions and 61 deletions
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@ -8,12 +8,16 @@

 ````jsx
 var Progress = antd.Progress.Line;
+var style = {
+  width: "170px"
+}

 React.render(
-  <div>
-    <Progress percent="30" width="170" strokeWidth="3" />
-    <Progress percent="70" width="170" strokeWidth="3" status="exception" />
-    <Progress percent="100" width="170" strokeWidth="3" />
+  <div style={style}>
+    <Progress percent="30" strokeWidth="5" />
+    <Progress percent="50" strokeWidth="5" status="active" />
+    <Progress percent="70" strokeWidth="5" status="exception" />
+    <Progress percent="100" strokeWidth="5" />
  </div>
  , document.getElementById('components-progress-demo-line-mini'));
 ````
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@ -12,6 +12,7 @@ var Progress = antd.Progress.Line;
 React.render(
  <div>
    <Progress percent="30" />
+    <Progress percent="50" status="active" />
    <Progress percent="70" status="exception" />
    <Progress percent="100" />
  </div>
--- a/components/progress/index.jsx
+++ b/components/progress/index.jsx
@ -1,65 +1,61 @@
-import {Line as Progressline, Circle as Progresscircle} from 'rc-progress';
+import {Circle as Progresscircle} from 'rc-progress';
 import React from 'react';
 import assign from 'object-assign';

+const prefixCls = 'ant-progress';
+
+const statusColorMap = {
+  'normal': '#2db7f5',
+  'exception': '#ff6600',
+  'success': '#87d068'
+};
+
 var Line = React.createClass({
  getDefaultProps() {
    return {
-      width: 300,
      percent: 0,
-      strokeWidth: 3,
+      strokeWidth: '10px',
      status: 'normal' // exception
    };
  },
  render() {
-    var statusColorMap = {
-      'normal': '#3FC7FA',
-      'exception': '#FE8C6A',
-      'success': '#85D262'
-    };
-
    var props = assign({}, this.props);

    if (parseInt(props.percent) === 100) {
      props.status = 'success';
    }

-    var style = {
-      'width': props.width
-    };
-    var fontSize = (props.width / 100 * props.strokeWidth);
-    var iconStyle = {
-      'fontSize': (fontSize < 12) ? 12 : fontSize
-    };
-    var textStyle = {
-      'color': statusColorMap[props.status]
-    };
    var progressInfo;
    if (props.status === 'exception') {
      progressInfo = (
-        <span style={textStyle} className='ant-progress-line-text'>
-          <i style={iconStyle} className="anticon anticon-exclamation-circle"></i>
+        <span className={prefixCls + '-line-text'}>
+          <i className="anticon anticon-exclamation-circle"></i>
        </span>
      );
    } else if (props.status === 'success') {
      progressInfo = (
-        <span style={textStyle} className='ant-progress-line-text'>
-          <i style={iconStyle} className="anticon anticon-check-circle"></i>
+        <span className={prefixCls + '-line-text'}>
+          <i className="anticon anticon-check-circle"></i>
        </span>
      );
    } else {
      progressInfo = (
-        <span className='ant-progress-line-text'>{props.percent}%</span>
+        <span className={prefixCls + '-line-text'}>{props.percent}%</span>
      );
    }
+    var persentStyle = {
+      width: props.percent + '%',
+      height: props.strokeWidth
+    };

    return (
-      <div className='ant-progress-line-wrap'>
-        <div className='ant-progress-line-inner' style={style}>
-          <Progressline percent={props.percent} strokeWidth={props.strokeWidth}
-            strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
-        </div>
+      <div className={prefixCls + '-line-wrap clearfix status-' + props.status}>
        {progressInfo}
+        <div className={prefixCls + '-line-outer'}>
+          <div className={prefixCls + '-line-inner'}>
+            <div className={prefixCls + '-line-bg'} style={persentStyle}></div>
+          </div>
+        </div>
      </div>
    );
  }
@ -75,12 +71,6 @@ var Circle = React.createClass({
    };
  },
  render() {
-    var statusColorMap = {
-      'normal': '#3FC7FA',
-      'exception': '#FE8C6A',
-      'success': '#85D262'
-    };
-
    var props = assign({}, this.props);

    if (parseInt(props.percent) === 100) {
@ -89,36 +79,31 @@ 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='ant-progress-circle-text'>
+        <span className={prefixCls + '-circle-text'}>
          <i className='anticon anticon-exclamation'></i>
        </span>
      );
    } else if (props.status === 'success') {
      progressInfo = (
-        <span style={textStyle} className='ant-progress-circle-text'>
+        <span className={prefixCls + '-circle-text'}>
          <i className="anticon anticon-check"></i>
        </span>
      );
    } else {
      progressInfo = (
-        <span className="ant-progress-circle-text">{props.percent}%</span>
+        <span className={prefixCls + '-circle-text'}>{props.percent}%</span>
      );
    }

    return (
-      <div className="ant-progress-circle-wrap" style={wrapStyle}>
-        <div className="ant-progress-circle-inner" style={style}>
+      <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" />
          {progressInfo}
--- a/components/progress/index.md
+++ b/components/progress/index.md
@ -16,15 +16,24 @@
 * 当需要显示一个操作完成的百分比时。


-## API
+## Progress Circle API

 | 参数     | 说明           | 类型     | 默认值       |
 |----------|---------------|----------|-------------|
 | percent  | 百分比         | number   | 0           |
 | status   | 状态，有两个值normal、exception | string   | normal |
-| strokeWidth | 进度条线宽度，单位是进度条画布宽度的百分比 | number | 1           |
+| strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1           |
 | width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |


+## Progress Bar API
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|---------------|----------|-------------|
+| percent  | 百分比         | number   | 0           |
+| status   | 状态，有两个值normal、exception、active三种状态 | string   | normal |
+| strokeWidth | 进度条线的宽度，单位是px | number | 1           |
+
+


--- a/style/components/progress.less
+++ b/style/components/progress.less
@ -5,29 +5,69 @@
  &-circle-wrap {
    display: inline-block;
  }
-
  &-line-wrap {
+    width: 100%;
    font-size: 12px;
+    position: relative;
+  }
+  &-line-outer {
+    margin-right: 45px;
  }
  &-line-inner {
    display: inline-block;
-
-    svg {
-      vertical-align: middle;
-    }
+    width: 100%;
+    background-color: #E9E9E9;
+    border-radius: 100px;
+    margin-right: 45px;
+  }
+  &-line-bg {
+    border-radius: 100px;
+    background-color: @primary-color;
  }
-
  &-line-text {
-    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 35px;
+    text-align: left;
    font-size: 1em;
    margin-left: 10px;
-    line-height: 1;

    .anticon {
      font-size: 12px;
    }
  }
-
+  &-line-wrap.status-active {
+    .@{prefixProgressClass}-line-bg:before {
+      content: "";
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      background: #fff;
+      border-radius: 10px;
+      -webkit-animation: progress-active 2s ease infinite;
+      animation: progress-active 2s ease infinite;
+    }
+  }
+  &-line-wrap.status-exception {
+    .@{prefixProgressClass}-line-bg {
+      background-color: @error-color;
+    }
+    .@{prefixProgressClass}-line-text {
+      color: @error-color;
+    }
+  }
+  &-line-wrap.status-success {
+    .@{prefixProgressClass}-line-bg {
+      background-color: @success-color;
+    }
+    .@{prefixProgressClass}-line-text {
+      color: @success-color;
+    }
+  }

  &-circle-inner {
    position: relative;
@ -47,4 +87,25 @@
      font-size: 14/12em;
    }
  }
+  &-circle-wrap.status-exception {
+    .@{prefixProgressClass}-circle-text {
+      color: @error-color;
+    }
+  }
+  &-circle-wrap.status-success {
+    .@{prefixProgressClass}-circle-text {
+      color: @success-color;
+    }
+  }
+}
+
+@keyframes progress-active {
+  0% {
+    opacity: .3;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
 }