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%

A standard progress bar.

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

ReactDOM.render(
  <Tooltip title="3 done / 3 in progress / 4 to do">
    <Progress percent={60} successPercent={30} />
  </Tooltip>,
  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#

PropertyDescriptionTypeDefault
formattemplate function of the contentfunction(percent, successPercent)percent => percent + '%'
gapDegree (type=circle)the gap degree of half circle, 0 ~ 360number0
gapPosition (type=circle)the gap position, options: top bottom left rightstringtop
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 activestring-
strokeWidth (type=line)to set the width of the progress bar, unit: pxnumber10
strokeWidth (type=circle)to set the width of the circular progress bar, unit: percentage of the canvas widthnumber6
strokeLinecapto set the style of the progress linecapEnum{ 'round', 'square' }round
strokeColorcolor of progress barstring-
successPercentsegmented success percent, works when type="line"number0
typeto set the type, options: line circle dashboardstringline
width (type=circle)to set the canvas width of the circular progress bar, unit: pxnumber132