Progress

Display the current progress of an operation flow.

When To Use#

If it will take a long time to complete an operation, you can use Progress to show the current progress and status.

  • When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.

  • When you need to display the completion percentage of an operation.

Examples

30%
50%

A standard progress bar.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div>
    <Progress percent={30} />
    <Progress percent={50} status="active" />
    <Progress percent={70} status="exception" />
    <Progress percent={100} />
    <Progress percent={50} showInfo={false} />
  </div>,
  mountNode
);
30%
50%

Appropriate for a narrow area.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div style={{ width: 170 }}>
    <Progress percent={30} size="small" />
    <Progress percent={50} size="small" status="active" />
    <Progress percent={70} size="small" status="exception" />
    <Progress percent={100} size="small" />
  </div>,
  mountNode
);
0%

A dynamic progress bar is better.

expand codeexpand code
import { Progress, Button } from 'antd';

const ButtonGroup = Button.Group;

class App extends React.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 });
  }

  render() {
    return (
      <div>
        <Progress type="circle" percent={this.state.percent} />
        <ButtonGroup>
          <Button onClick={this.decline} icon="minus" />
          <Button onClick={this.increase} icon="plus" />
        </ButtonGroup>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
75 Days
Done

You can set a custom text by setting the format prop.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div>
    <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
    <Progress type="circle" percent={100} format={() => 'Done'} />
  </div>,
  mountNode
);
60%
60%
60%

A standard progress bar.

expand codeexpand code
import { Tooltip, Progress } from 'antd';

ReactDOM.render(
  <div>
    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} successPercent={30} />
    </Tooltip>

    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} successPercent={30} type="circle" />
    </Tooltip>

    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} successPercent={30} type="dashboard" />
    </Tooltip>
  </div>,
  mountNode
);
99.9%
99.9%

A package of linear-gradient. It is recommended to only pass two colors.

expand codeexpand code
import { Progress } from 'antd';

const Demo = () => (
  <div>
    <Progress
      strokeColor={{
        '0%': '#108ee9',
        '100%': '#87d068',
      }}
      percent={99.9}
    />
    <Progress
      strokeColor={{
        from: '#108ee9',
        to: '#87d068',
      }}
      percent={99.9}
      status="active"
    />
  </div>
);

ReactDOM.render(<Demo />, mountNode);
75%

A circular progress bar.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div>
    <Progress type="circle" percent={75} />
    <Progress type="circle" percent={70} status="exception" />
    <Progress type="circle" percent={100} />
  </div>,
  mountNode
);
30%

A smaller circular progress bar.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div>
    <Progress type="circle" percent={30} width={80} />
    <Progress type="circle" percent={70} width={80} status="exception" />
    <Progress type="circle" percent={100} width={80} />
  </div>,
  mountNode
);
0%

A dynamic progress bar is better.

expand codeexpand code
import { Progress, Button } from 'antd';

const ButtonGroup = Button.Group;

class App extends React.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 });
  }

  render() {
    return (
      <div>
        <Progress percent={this.state.percent} />
        <ButtonGroup>
          <Button onClick={this.decline} icon="minus" />
          <Button onClick={this.increase} icon="plus" />
        </ButtonGroup>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
75%

By setting type=dashboard, you can get a dashboard style of progress easily.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(<Progress type="dashboard" percent={75} />, mountNode);
75%
75%
75%

By setting strokeLinecap="square", you can change the linecaps from round to square.

expand codeexpand code
import { Progress } from 'antd';

ReactDOM.render(
  <div>
    <Progress strokeLinecap="square" percent={75} />
    <Progress strokeLinecap="square" type="circle" percent={75} />
    <Progress strokeLinecap="square" type="dashboard" percent={75} />
  </div>,
  mountNode
);

API#

Properties that shared by all types.

PropertyDescriptionTypeDefault
typeto set the type, options: line circle dashboardstringline
formattemplate function of the contentfunction(percent, successPercent)percent => percent + '%'
percentto set the completion percentagenumber0
showInfowhether to display the progress value and the status iconbooleantrue
statusto set the status of the Progress, options: success exception active normalstring-
strokeLinecapto set the style of the progress linecapEnum{ 'round', 'square' }round
strokeColorcolor of progress barstring-
successPercentsegmented success percentnumber0

type="line"#

PropertyDescriptionTypeDefault
strokeWidthto set the width of the progress bar, unit: pxnumber10
strokeColorcolor of progress bar, render linear-gradient when passing an objectstring | { from: string; to: string; direction: string }-

type="circle"#

PropertyDescriptionTypeDefault
widthto set the canvas width of the circular progress, unit: pxnumber132
strokeWidthto set the width of the circular progress, unit: percentage of the canvas widthnumber6

type="dashboard"#

PropertyDescriptionTypeDefault
widthto set the canvas width of the dashboard progress, unit: pxnumber132
strokeWidthto set the width of the dashboard progress, unit: percentage of the canvas widthnumber6
gapDegreethe gap degree of half circle, 0 ~ 360number0
gapPositionthe gap position, options: top bottom left rightstringtop
NotificationPopconfirm