Progress

To display the current progress of an operation flow.

When To Use#

If it will take a long time to complete the 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.

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.

import { Progress } from 'antd';

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

A dynamic progress bar is better.

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 custom text format by setting format.

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);
75%

A circular progress bar.

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.

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.

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.

import { Progress } from 'antd';

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

API#

PropertyDescriptionTypeDefault
typeto set the type, options: line circle dashboardstringline
percentto set the completion percentagenumber0
formattemplate function of the contentfunction(percent)percent => percent + '%'
statusto set the status of the progress, options: success exception activestring-
showInfodetermine whether to display the progress value and the status iconbooleantrue
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
width (type=circle)to set the canvas width of the circular progress bar, unit: pxnumber132
gapDegree (type=circle)the gap degree of half circle, 0 ~ 360number0
gapPosition (type=circle)the gap positionEnum{ 'top', 'bottom', 'left', 'right' }top