Progress bar
Circular progress bar
Mini size 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
API

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.

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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%

Mini size progress bar

Appropriate for a narrow area.

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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;

Dynamic circular progress bar

A dynamic progress bar is better.

TypeScript
JavaScript
import { MinusOutlined, PlusOutlined } from 'infra-design-icons';
import { Button, Progress } from 'infrad';
import React, { useState } from 'react';

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

Custom text format

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

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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

export default App;

60%

Progress bar with success segment

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

TypeScript
JavaScript
import { Progress, Tooltip } from 'infrad';
import React from 'react';

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%

90%

Custom line gradient

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

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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%

Circular progress bar

A circular progress bar.

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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%

Mini size circular progress bar

A smaller circular progress bar.

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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;

Dynamic

A dynamic progress bar is better.

TypeScript
JavaScript
import { MinusOutlined, PlusOutlined } from 'infra-design-icons';
import { Button, Progress } from 'infrad';
import React, { useState } from 'react';

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%

Dashboard

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

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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

export default App;

75%

Stroke Linecap

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

TypeScript
JavaScript
import { Progress } from 'infrad';
import React from 'react';

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

export default App;

50%

30%

60%

Progress bar with steps

A progress bar with steps.

TypeScript
JavaScript
import React from 'react';

import { green, red } from '@ant-design/colors';
import { Progress } from 'infrad';

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;

API#

Properties that shared by all types.

Property	Description	Type	Default
format	The template function of the content	function(percent, successPercent)	(percent) => percent + `%`
percent	To set the completion percentage	number	0
showInfo	Whether to display the progress value and the status icon	boolean	true
status	To set the status of the Progress, options: `success` `exception` `normal` `active`(line only)	string	-
strokeColor	The color of progress bar	string	-
strokeLinecap	To set the style of the progress linecap	`round` \| `butt` \| `square`, see stroke-linecap	`round`
success	Configs of successfully progress bar	{ percent: number, strokeColor: string }	-
trailColor	The color of unfilled part	string	-
type	To set the type, options: `line` `circle` `dashboard`	string	`line`

`type="line"`#

Property	Description	Type	Default	Version
steps	The total step count	number	-	-
strokeColor	The 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[]`
strokeWidth	To set the width of the progress bar, unit: `px`	number	10	-

`type="circle"`#

Property	Description	Type	Default
strokeColor	The color of circular progress, render `linear-gradient` when passing an object	string \| object	-
strokeWidth	To set the width of the circular progress, unit: percentage of the canvas width	number	6
width	To set the canvas width of the circular progress, unit: `px`	number	132

`type="dashboard"`#

Property	Description	Type	Default
gapDegree	The gap degree of half circle, 0 ~ 295	number	75
gapPosition	The gap position, options: `top` `bottom` `left` `right`	string	`bottom`
strokeWidth	To set the width of the dashboard progress, unit: percentage of the canvas width	number	6
width	To set the canvas width of the dashboard progress, unit: `px`	number	132