Progress进度条

展示操作的当前进度。

何时使用

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

  • 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时;

  • 当需要显示一个操作完成的百分比时。

代码演示

Progress进度条 - 图1

进度条

标准的进度条。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress percent={30} />
  5. <Progress percent={50} status="active" />
  6. <Progress percent={70} status="exception" />
  7. <Progress percent={100} />
  8. <Progress percent={50} showInfo={false} />
  9. </div>,
  10. mountNode,
  11. );

Progress进度条 - 图2

小型进度条

适合放在较狭窄的区域内。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div style={{ width: 170 }}>
  4. <Progress percent={30} size="small" />
  5. <Progress percent={50} size="small" status="active" />
  6. <Progress percent={70} size="small" status="exception" />
  7. <Progress percent={100} size="small" />
  8. </div>,
  9. mountNode,
  10. );

Progress进度条 - 图3

进度圈动态展示

会动的进度条才是好进度条。

  1. import { Progress, Button } from 'antd';
  2. import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
  3. const ButtonGroup = Button.Group;
  4. class App extends React.Component {
  5. state = {
  6. percent: 0,
  7. };
  8. increase = () => {
  9. let percent = this.state.percent + 10;
  10. if (percent > 100) {
  11. percent = 100;
  12. }
  13. this.setState({ percent });
  14. };
  15. decline = () => {
  16. let percent = this.state.percent - 10;
  17. if (percent < 0) {
  18. percent = 0;
  19. }
  20. this.setState({ percent });
  21. };
  22. render() {
  23. return (
  24. <div>
  25. <Progress type="circle" percent={this.state.percent} />
  26. <ButtonGroup>
  27. <Button onClick={this.decline} icon={<MinusOutlined />} />
  28. <Button onClick={this.increase} icon={<PlusOutlined />} />
  29. </ButtonGroup>
  30. </div>
  31. );
  32. }
  33. }
  34. ReactDOM.render(<App />, mountNode);

Progress进度条 - 图4

自定义文字格式

format 属性指定格式。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
  5. <Progress type="circle" percent={100} format={() => 'Done'} />
  6. </div>,
  7. mountNode,
  8. );

Progress进度条 - 图5

分段进度条

标准的进度条。type="circle|dashboard" 时不支持分段颜色。

  1. import { Tooltip, Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Tooltip title="3 done / 3 in progress / 4 to do">
  5. <Progress percent={60} successPercent={30} />
  6. </Tooltip>
  7. <Tooltip title="3 done / 3 in progress / 4 to do">
  8. <Progress percent={60} successPercent={30} type="circle" />
  9. </Tooltip>
  10. <Tooltip title="3 done / 3 in progress / 4 to do">
  11. <Progress percent={60} successPercent={30} type="dashboard" />
  12. </Tooltip>
  13. </div>,
  14. mountNode,
  15. );

Progress进度条 - 图6

自定义进度条渐变色

linear-gradient 的封装。推荐只传两种颜色。

  1. import { Progress } from 'antd';
  2. const Demo = () => (
  3. <div>
  4. <Progress
  5. strokeColor={{
  6. '0%': '#108ee9',
  7. '100%': '#87d068',
  8. }}
  9. percent={99.9}
  10. />
  11. <Progress
  12. strokeColor={{
  13. from: '#108ee9',
  14. to: '#87d068',
  15. }}
  16. percent={99.9}
  17. status="active"
  18. />
  19. <Progress
  20. type="circle"
  21. strokeColor={{
  22. '0%': '#108ee9',
  23. '100%': '#87d068',
  24. }}
  25. percent={90}
  26. />
  27. <Progress
  28. type="circle"
  29. strokeColor={{
  30. '0%': '#108ee9',
  31. '100%': '#87d068',
  32. }}
  33. percent={100}
  34. />
  35. </div>
  36. );
  37. ReactDOM.render(<Demo />, mountNode);

Progress进度条 - 图7

进度圈

圈形的进度。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress type="circle" percent={75} />
  5. <Progress type="circle" percent={70} status="exception" />
  6. <Progress type="circle" percent={100} />
  7. </div>,
  8. mountNode,
  9. );

Progress进度条 - 图8

小型进度圈

小一号的圈形进度。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress type="circle" percent={30} width={80} />
  5. <Progress type="circle" percent={70} width={80} status="exception" />
  6. <Progress type="circle" percent={100} width={80} />
  7. </div>,
  8. mountNode,
  9. );

Progress进度条 - 图9

动态展示

会动的进度条才是好进度条。

  1. import { Progress, Button } from 'antd';
  2. import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
  3. const ButtonGroup = Button.Group;
  4. class App extends React.Component {
  5. state = {
  6. percent: 0,
  7. };
  8. increase = () => {
  9. let percent = this.state.percent + 10;
  10. if (percent > 100) {
  11. percent = 100;
  12. }
  13. this.setState({ percent });
  14. };
  15. decline = () => {
  16. let percent = this.state.percent - 10;
  17. if (percent < 0) {
  18. percent = 0;
  19. }
  20. this.setState({ percent });
  21. };
  22. render() {
  23. return (
  24. <div>
  25. <Progress percent={this.state.percent} />
  26. <ButtonGroup>
  27. <Button onClick={this.decline} icon={<MinusOutlined />} />
  28. <Button onClick={this.increase} icon={<PlusOutlined />} />
  29. </ButtonGroup>
  30. </div>
  31. );
  32. }
  33. }
  34. ReactDOM.render(<App />, mountNode);

Progress进度条 - 图10

仪表盘

通过设置 type=dashboard,可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度,可以设置 gapDegree 为你想要的值。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress type="dashboard" percent={75} />
  5. <Progress type="dashboard" percent={75} gapDegree={30} />
  6. </div>
  7. , mountNode);

Progress进度条 - 图11

圆角/方角边缘

通过设定 strokeLinecap="square|round" 可以调整进度条边缘的形状。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress strokeLinecap="square" percent={75} />
  5. <Progress strokeLinecap="square" type="circle" percent={75} />
  6. <Progress strokeLinecap="square" type="dashboard" percent={75} />
  7. </div>,
  8. mountNode,
  9. );

Progress进度条 - 图12

步骤进度条

带步骤的进度条。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Progress percent={50} steps={3} strokeColor="#1890ff" />
  5. <br />
  6. <Progress percent={30} steps={5} strokeColor="#1890ff" />
  7. <br />
  8. <Progress percent={100} steps={5} size="small" strokeColor="#1890ff" />
  9. </div>,
  10. mountNode,
  11. );

API

各类型共用的属性。

属性说明类型默认值
type类型,可选 line circle dashboardstringline
format内容的模板函数function(percent, successPercent)percent => percent + '%'
percent百分比number0
showInfo是否显示进度数值或状态图标booleantrue
status状态,可选:success exception normal active(仅限 line)string-
strokeLinecap-round | squareround
strokeColor进度条的色彩string-
successPercent已完成的分段百分比number0
trailColor未完成的分段的颜色string-

type="line"

属性说明类型默认值
strokeWidth进度条线的宽度,单位 pxnumber10
strokeColor进度条的色彩,传入 object 时为渐变string | { from: string; to: string; direction: string }-
steps进度条总共步数number-

type="circle"

属性说明类型默认值
width圆形进度条画布宽度,单位 pxnumber132
strokeWidth圆形进度条线的宽度,单位是进度条画布宽度的百分比number6
strokeColor圆形进度条线的色彩,传入 object 时为渐变string | object-

type="dashboard"

属性说明类型默认值
width仪表盘进度条画布宽度,单位 pxnumber132
strokeWidth仪表盘进度条线的宽度,单位是进度条画布宽度的百分比number6
gapDegree仪表盘进度条缺口角度,可取值 0 ~ 295number75
gapPosition仪表盘进度条缺口位置top | bottom | left | rightbottom