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.

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%

Mini size progress bar

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

Dynamic circular progress bar

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

Custom text format

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%

Circular progress bar

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%

Mini size circular progress bar

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

Dynamic

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%

Dashboard

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#

Property	Description	Type	Default
type	to set the type, options: `line` `circle` `dashboard`	string	`line`
percent	to set the completion percentage	number	0
format	template function of the content	function(percent)	`percent => percent + '%'`
status	to set the status of the Progress, options: `success` `exception` `active`	string	-
showInfo	whether to display the progress value and the status icon	boolean	true
strokeWidth `(type=line)`	to set the width of the progress bar, unit: `px`	number	10
strokeWidth `(type=circle)`	to set the width of the circular progress bar, unit: percentage of the canvas width	number	6
width `(type=circle)`	to set the canvas width of the circular progress bar, unit: `px`	number	132
gapDegree `(type=circle)`	the gap degree of half circle, 0 ~ 360	number	0
gapPosition `(type=circle)`	the gap position, options: `top` `bottom` `left` `right`	string	`top`

Components

Progress

When To Use#

Examples

API#