logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Progress bar
Circular progress bar
Mini size progress bar
Responsive circular progress bar
Mini size circular progress bar
Dynamic circular progress bar
Dynamic
Custom text format
Dashboard
Progress bar with success segment
Stroke Linecap
Custom line gradient
Progress bar with steps
Progress size
API
type="line"
type="circle"
type="dashboard"

Progress

PopconfirmResult

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

Progress bar

A standard progress bar.

expand codeexpand code
TypeScript
JavaScript
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;
Mini size progress bar

Appropriate for a narrow area.

expand codeexpand code
TypeScript
JavaScript
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;
Mini size circular progress bar

A smaller circular progress bar.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Dynamic

A dynamic progress bar is better.

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

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

  const increase = () => {
    setPercent((prevPercent) => {
      const newPercent = prevPercent + 10;
      if (newPercent > 100) {
        return 100;
      }
      return newPercent;
    });
  };

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

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

export default App;
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
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Stroke Linecap

By setting strokeLinecap="butt", you can change the linecaps from round to butt, see stroke-linecap for more information.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Progress bar with steps

A progress bar with steps.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress } from 'antd';
import { red, green } from '@ant-design/colors';

const App: React.FC = () => (
  <>
    <Progress percent={50} steps={3} />
    <br />
    <Progress percent={30} steps={5} />
    <br />
    <Progress percent={100} steps={5} size="small" strokeColor={green[6]} />
    <br />
    <Progress percent={60} steps={5} strokeColor={[green[6], green[6], red[5]]} />
  </>
);

export default App;
Circular progress bar

A circular progress bar.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Responsive circular progress bar

Responsive circular progress bar. When width is smaller than 20, progress information will be displayed in Tooltip.

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

const App: React.FC = () => (
  <>
    <Progress
      type="circle"
      trailColor="#e6f4ff"
      percent={60}
      strokeWidth={20}
      size={14}
      format={(number) => `进行中,已完成${number}%`}
    />
    <span style={{ marginLeft: 8 }}>代码发布</span>
  </>
);

export default App;
Dynamic circular progress bar

A dynamic progress bar is better.

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

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

  const increase = () => {
    setPercent((prevPercent) => {
      const newPercent = prevPercent + 10;
      if (newPercent > 100) {
        return 100;
      }
      return newPercent;
    });
  };

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

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

export default App;
Custom text format

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Progress bar with success segment

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

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

const App: React.FC = () => (
  <>
    <Tooltip title="3 done / 3 in progress / 4 to do">
      <Progress percent={60} success={{ percent: 30 }} />
    </Tooltip>
    <Space wrap>
      <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>
    </Space>
  </>
);

export default App;
Custom line gradient

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Progress, Space } from 'antd';

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

export default App;
Progress size

The size of progress.

expand codeexpand code
TypeScript
JavaScript
import { Progress, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Space direction="vertical">
      <Progress percent={50} />
      <Progress percent={50} size="small" />
      <Progress percent={50} size={[300, 20]} />
    </Space>
    <br />
    <br />
    <Space size={30}>
      <Progress type="circle" percent={50} />
      <Progress type="circle" percent={50} size="small" />
      <Progress type="circle" percent={50} size={20} />
    </Space>
    <br />
    <br />
    <Space size={30}>
      <Progress type="dashboard" percent={50} />
      <Progress type="dashboard" percent={50} size="small" />
      <Progress type="dashboard" percent={50} size={20} />
    </Space>
    <br />
    <br />
    <Space size={30} wrap>
      <Progress steps={3} percent={50} />
      <Progress steps={3} percent={50} size="small" />
      <Progress steps={3} percent={50} size={20} />
      <Progress steps={3} percent={50} size={[20, 30]} />
    </Space>
  </>
);

export default App;

API

Properties that shared by all types.

PropertyDescriptionTypeDefaultVersion
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 | butt | square, see stroke-linecapround-
successConfigs of successfully progress bar{ percent: number, strokeColor: string }--
trailColorThe color of unfilled partstring--
typeTo set the type, options: line circle dashboardstringline
sizeProgress sizenumber | [number, number] | "small" | "default""default"v5.3.0

type="line"

PropertyDescriptionTypeDefaultVersion
stepsThe total step countnumber--
strokeColorThe color of progress bar, render linear-gradient when passing an object, could accept string[] when has steps.string | string[] | { from: string; to: string; direction: string }-4.21.0: string[]

type="circle"

PropertyDescriptionTypeDefaultVersion
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-

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
30%
50%
30%
50%
30%
0%
75%
75%
75%
75%
75%
50%

30%


60%
75%
代码发布
0%
75 Days
Done
60%
60%
60%
99.9%
99.9%
90%
50%
50%
50%


50%
50%


50%
50%


50%
50%
50%
50%