# 进度条

展示操作的当前进度。

## 使用场景

耗时操作时，户显示该操作的当前进度和状态。

* 耗时操作过渡
* 百分比进度。

## 案例演示

### Progress 基本使用

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Progress type="circle" percent={65} />
    <Progress type="circle" percent={60} status="exception" />
    <Progress type="circle" percent={100} />
    <Progress percent={35} />
    <Progress percent={55} status="active" />
    <Progress percent={75} status="exception" />
    <Progress percent={100} />
    <Progress percent={20} showInfo={false} />
  </div>
), _react_runner_);
```
---demoend

### Progress 基本使用 type为circle时设置width

circle时，设置width，可进行自定义size

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Progress type="circle" percent={50} width={80} />
    <Progress type="circle" percent={25} width={80} status="exception" />
    <Progress type="circle" percent={100} width={80} />
    <Progress percent={45} strokeWidth={5} />
    <Progress percent={50} strokeWidth={5} status="active" />
    <Progress percent={75} strokeWidth={5} status="exception" />
    <Progress percent={100} strokeWidth={5} />
    <Progress percent={50} showInfo={false} />
  </div>
), _react_runner_);
```
---demoend

### Progress 自定义格式

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Progress type="circle" percent={75} format={percent => `${percent / 10.0}倍`} />
    <Progress type="circle" percent={100} format={() => '成功'} />
  </div>
), _react_runner_);
```
---demoend

### Progress circle 设置自定义的 svg 内容

---demo
```js
import { Progress, Flex } from 'amos-framework';

const colorSvg = (
  <defs>
    <linearGradient id="myColors" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style={{ stopColor: '#ff3737' }} />
      <stop offset="5%" style={{ stopColor: '#ff5050' }} />
      <stop offset="16%" style={{ stopColor: '#ff515b' }} />
      <stop offset="99%" style={{ stopColor: '#ff6543' }} />
      <stop offset="100%" style={{ stopColor: '#ff845e' }} />
    </linearGradient>
  </defs>
);

const wrapStyle = {
  background: '#a6b6d0',
  width: '250px',
  height: '250px'
};

ReactDOM.render((
  <Flex center style={wrapStyle}>
    <Progress type="circle" percent={80} trailColor="#40486a" width={200} nativeSvg={colorSvg} valueColor="url(#myColors)" />
  </Flex>
), _react_runner_);
```
---demoend

### Progress mini、large 类型

设置size, size可取值 'normal|sm|lg'

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Progress percent={30} size="sm" />
    <Progress percent={50} size="sm" status="active" />
    <Progress percent={70} size="sm" status="exception" />
    <Progress percent={100} size="sm" />
    <Progress percent={30} size="lg" />
    <Progress percent={50} size="lg" status="active" />
    <Progress percent={70} size="lg" status="exception" />
    <Progress percent={100} size="lg" />
  </div>
), _react_runner_);
```
---demoend

### 其它类型 dashboard

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Progress type="dashboard" percent={75} />
  </div>
), _react_runner_);
```
---demoend

### 分段类型

---demo
```js
import { Progress } from 'amos-framework';

ReactDOM.render((
  <div>
    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} successPercent={30} />
    </Tooltip>
  </div>
), _react_runner_);
```
---demoend

### 动态变化

---demo
```js
import { Progress, Button } from 'amos-framework';

const ButtonGroup = Button.Group;

class Demo extends Component {

  state = {
    percent: 0
  };

  increase = () => {
    let percent = this.state.percent + 10;
    if (percent > 100) {
      percent = 100;
    }
    this.setState({ percent });
  }

  decline = () => {
    let percent = this.state.percent - 10;
    if (percent < 0) {
      percent = 0;
    }
    this.setState({ percent });
  }

  handleChange = (value) => {
    let percent = this.state.percent;
    switch (value) {
      // 减
      case 'minus':
        percent -= 10;
        if (percent < 0) {
          percent = 0;
        }
        break;
      // 加
      case 'plus':
        percent += 10;
        if (percent > 100) {
          percent = 100;
        }
        break;
      default:
        break;
    }
    this.setState({
      percent
    });
  }

  render() {
    const { percent } = this.state;
    return (
      <div>
        <Progress type="circle" percent={percent} />
        <Progress percent={percent} />
        <ButtonGroup onChange={this.handleChange}>
          <Button useInnerIcon type="minor" value="minus" icon="minus" />
          <Button useInnerIcon type="minor" value="plus" icon="plus" />
        </ButtonGroup>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 动态进行

---demo
```js
import { Slider, InputNumber } from 'amos-framework';

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dynamicPercent: 0
    };
    this.excudeStatus = true;
  }

  start = () => {
    if (this.excudeStatus){
      let dp = this.state.dynamicPercent + 1;
      if (dp > 100) {
        dp = 100;
      }
      this.setState({
        dynamicPercent: dp
      });
      if (dp < 100){
        setTimeout(() => {
          this.start();
        }, 100);
      } else {
        this.excudeStatus = false;
      }
    }
  }

  stopExcude = () => {
    this.excudeStatus = false;
  }

  statExcude = () => {
    this.excudeStatus = true;
    this.start();
  }

  clearAll = () => {
    this.setState({
      dynamicPercent: 0
    });
  }



  render() {
    const { dynamicPercent } = this.state;
    return (
      <div>
        <Button onClick={this.statExcude}>启动</Button>
        <Button onClick={this.stopExcude}>停止</Button>
        <Button onClick={this.clearAll}>清空</Button>
        <Progress percent={dynamicPercent} size="lg" />
        <Progress type="circle" percent={dynamicPercent} width={80} />
        <Progress type="dashboard" percent={dynamicPercent} width={80} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params      | type    | default         | description           |
|----------|---------------|----------|---------------|
| type     | string   | `line`      | 类型，可选 `line`、`circle`、`dashboard` |
| percent  | number | 0 | 百分比 |
| format   | function(percent)   | `percent => percent + '%'` | 内容的模板函数 |
| status   | string   | - | 状态，可选：`success`、 `exception`、 `active`、`normal` |
| size   | string   | `normal` | 尺寸，可选 `normal`、`sm`、`lg` |
| showInfo | bool | true  | 是否显示进度数值或状态图标 |
| strokeWidth | number | `(type=line):10;(type=circle):6`  | 当type为`line`表示进度条线的宽度，单位 px。当type为`circle`时圆形进度条线的宽度，单位是进度条画布宽度的百分比 |
| width `(type=circle)` | number | 132 | 圆形进度条画布宽度，单位 px |
| nativeSvg | node | - | 当为 circle、dashboard 时，支持自定义的 svg 内容 |
| trailColor | String | - | 自定义的 trail 颜色 |
| valueColor | String | - | 自定义的 value 颜色 |