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. const ButtonGroup = Button.Group;
  3. class App extends React.Component {
  4. state = {
  5. percent: 0,
  6. };
  7. increase = () => {
  8. let percent = this.state.percent + 10;
  9. if (percent > 100) {
  10. percent = 100;
  11. }
  12. this.setState({ percent });
  13. };
  14. decline = () => {
  15. let percent = this.state.percent - 10;
  16. if (percent < 0) {
  17. percent = 0;
  18. }
  19. this.setState({ percent });
  20. };
  21. render() {
  22. return (
  23. <div>
  24. <Progress type="circle" percent={this.state.percent} />
  25. <ButtonGroup>
  26. <Button onClick={this.decline} icon="minus" />
  27. <Button onClick={this.increase} icon="plus" />
  28. </ButtonGroup>
  29. </div>
  30. );
  31. }
  32. }
  33. 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

分段进度条

标准的进度条。

  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. const ButtonGroup = Button.Group;
  3. class App extends React.Component {
  4. state = {
  5. percent: 0,
  6. };
  7. increase = () => {
  8. let percent = this.state.percent + 10;
  9. if (percent > 100) {
  10. percent = 100;
  11. }
  12. this.setState({ percent });
  13. };
  14. decline = () => {
  15. let percent = this.state.percent - 10;
  16. if (percent < 0) {
  17. percent = 0;
  18. }
  19. this.setState({ percent });
  20. };
  21. render() {
  22. return (
  23. <div>
  24. <Progress percent={this.state.percent} />
  25. <ButtonGroup>
  26. <Button onClick={this.decline} icon="minus" />
  27. <Button onClick={this.increase} icon="plus" />
  28. </ButtonGroup>
  29. </div>
  30. );
  31. }
  32. }
  33. ReactDOM.render(<App />, mountNode);

Progress进度条 - 图10

仪表盘

通过设置 type=dashboard,可以很方便地实现仪表盘样式的进度条。

  1. import { Progress } from 'antd';
  2. ReactDOM.render(<Progress type="dashboard" percent={75} />, 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. );

API

各类型共用的属性。

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

type="line"

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

type="circle"

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

type="dashboard"

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