logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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

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

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

A standard progress bar.

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

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 'mogud';

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 'mogud';

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 'mogud';

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 'mogud';

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 'mogud';

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 'mogud';
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 'mogud';

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 'mogud';

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 'mogud';

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 'mogud';

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

Show several parts of progress with different status.

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

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 'mogud';

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 'mogud';
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;
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%