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%
Progress bar

A standard progress bar.

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

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

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%
Dynamic circular progress bar

A dynamic progress bar is better.

expand codeexpand code
import { Progress, Button } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

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 (
      <>
        <Progress type="circle" percent={this.state.percent} />
        <Button.Group>
          <Button onClick={this.decline} icon={<MinusOutlined />} />
          <Button onClick={this.increase} icon={<PlusOutlined />} />
        </Button.Group>
      </>
    );
  }
}

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

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

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

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

A standard progress bar. Doesn't support trail color when type="circle|dashboard".

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

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

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

    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} success={{ percent: 30 }} type="dashboard" />
    </Tooltip>
  </>,
  mountNode,
);
99.9%
99.9%
90%
Custom line gradient

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

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

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

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

A circular progress bar.

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

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

A smaller circular progress bar.

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

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

A dynamic progress bar is better.

expand codeexpand code
import { Progress, Button } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

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 (
      <>
        <Progress percent={this.state.percent} />
        <Button.Group>
          <Button onClick={this.decline} icon={<MinusOutlined />} />
          <Button onClick={this.increase} icon={<PlusOutlined />} />
        </Button.Group>
      </>
    );
  }
}

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

By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.

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

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

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

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

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

30%

Progress bar with steps

A progress bar with steps.

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

ReactDOM.render(
  <>
    <Progress percent={50} steps={3} />
    <br />
    <Progress percent={30} steps={5} />
    <br />
    <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
  </>,
  mountNode,
);

API#

Properties that shared by all types.

PropertyDescriptionTypeDefault
formatThe template 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 normal active(line only)string-
strokeColorThe color of progress barstring-
strokeLinecapTo set the style of the progress linecapround | squareround
successConfigs of successfully progress bar{ percent: number, strokeColor: string }-
trailColorThe color of unfilled partstring-
typeTo set the type, options: line circle dashboardstringline

type="line"#

PropertyDescriptionTypeDefault
stepsThe total step countnumber-
strokeColorThe color of progress bar, render linear-gradient when passing an objectstring | { from: string; to: string; direction: string }-
strokeWidthTo set the width of the progress bar, unit: pxnumber10

type="circle"#

PropertyDescriptionTypeDefault
strokeColorThe color of circular progress, render linear-gradient when passing an objectstring | object-
strokeWidthTo set the width of the circular progress, unit: percentage of the canvas widthnumber6
widthTo set the canvas width of the circular progress, unit: pxnumber132

type="dashboard"#

PropertyDescriptionTypeDefault
gapDegreeThe gap degree of half circle, 0 ~ 295number75
gapPositionThe gap position, options: top bottom left rightstringbottom
strokeWidthTo set the width of the dashboard progress, unit: percentage of the canvas widthnumber6
widthTo set the canvas width of the dashboard progress, unit: pxnumber132