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 React from 'react';
import { Progress } from 'antd';

const App: React.FC = () => (
  <>
    <Progress percent={30} />
    <Progress percent={50} status="active" />
    <Progress percent={70} status="exception" />
    <Progress percent={100} />
    <Progress percent={50} showInfo={false} />
  </>
);

export default App;
30%
50%

Appropriate for a narrow area.

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

const App: React.FC = () => (
  <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>
);

export default App;
0%

A dynamic progress bar is better.

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

const App: React.FC = () => {
  const [percent, setPercent] = useState(0);

  const increase = () => {
    let newPercent = percent + 10;
    if (newPercent > 100) {
      newPercent = 100;
    }
    setPercent(newPercent);
  };

  const decline = () => {
    let newPercent = percent - 10;
    if (newPercent < 0) {
      newPercent = 0;
    }
    setPercent(newPercent);
  };

  return (
    <>
      <Progress type="circle" percent={percent} />
      <Button.Group>
        <Button onClick={decline} icon={<MinusOutlined />} />
        <Button onClick={increase} icon={<PlusOutlined />} />
      </Button.Group>
    </>
  );
};

export default App;
75 Days
Done

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

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

const App: React.FC = () => (
  <>
    <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
    <Progress type="circle" percent={100} format={() => 'Done'} />
  </>
);

export default App;
60%
60%
60%

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

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

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;
99.9%
99.9%
90%

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

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

const App: React.FC = () => (
  <>
    <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}
    />
  </>
);

export default App;
75%

A circular progress bar.

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

const App: React.FC = () => (
  <>
    <Progress type="circle" percent={75} />
    <Progress type="circle" percent={70} status="exception" />
    <Progress type="circle" percent={100} />
  </>
);

export default App;
30%

A smaller circular progress bar.

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

const App: React.FC = () => (
  <>
    <Progress type="circle" percent={30} width={80} />
    <Progress type="circle" percent={70} width={80} status="exception" />
    <Progress type="circle" percent={100} width={80} />
  </>
);

export default App;
0%

A dynamic progress bar is better.

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

const App: React.FC = () => {
  const [percent, setPercent] = useState(0);

  const increase = () => {
    let newPercent = percent + 10;
    if (newPercent > 100) {
      newPercent = 100;
    }
    setPercent(newPercent);
  };

  const decline = () => {
    let newPercent = percent - 10;
    if (newPercent < 0) {
      newPercent = 0;
    }
    setPercent(newPercent);
  };

  return (
    <>
      <Progress percent={percent} />
      <Button.Group>
        <Button onClick={decline} icon={<MinusOutlined />} />
        <Button onClick={increase} icon={<PlusOutlined />} />
      </Button.Group>
    </>
  );
};

export default App;
75%
75%

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 React from 'react';
import { Progress } from 'antd';

const App: React.FC = () => (
  <>
    <Progress type="dashboard" percent={75} />
    <Progress type="dashboard" percent={75} gapDegree={30} />
  </>
);

export default App;
75%
75%
75%

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

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

const App: React.FC = () => (
  <>
    <Progress strokeLinecap="square" percent={75} />
    <Progress strokeLinecap="square" type="circle" percent={75} />
    <Progress strokeLinecap="square" type="dashboard" percent={75} />
  </>
);

export default App;
50%

30%

A progress bar with steps.

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

const App: React.FC = () => (
  <>
    <Progress percent={50} steps={3} />
    <br />
    <Progress percent={30} steps={5} />
    <br />
    <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
  </>
);

export default App;

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