Progress 进度条

使用场景

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

示例

基本示例

20%

inline

function Basic() { return <Progress value={20} />; }

function Basic() {
  return <Progress value={20} />;
}

自定义文案

30/100 人已提交

inline

function RenderLabel() { return <Progress value={30} renderLabel={({ value }) => `${value}/100 人已提交`} />; }

function RenderLabel() {
  return <Progress value={30} renderLabel={({ value }) => `${value}/100 人已提交`} />;
}

圆形进度条

50%

50%

50%

inline

function Circle() { return ( <Group> <CircleProgress value={50} /> <CircleProgress value={50} lineColor="error.normal" /> <CircleProgress value={50} lineColor="success.normal" /> </Group> ); }

function Circle() {
  return (
    <Group>
      <CircleProgress value={50} />
      <CircleProgress value={50} lineColor="error.normal" />
      <CircleProgress value={50} lineColor="success.normal" />
    </Group>
  );
}

自定义圆环大小

50%

50%

inline

function CircleSize() { return ( <Group> <CircleProgress value={50} size="50px" renderLabel={() => null} /> <CircleProgress value={50} size="100px" renderLabel={({ value }) => <Text fontSize="24px">{value}%</Text>} /> <CircleProgress value={50} size="200px" renderLabel={({ value }) => <Text fontSize="48px">{value}%</Text>} /> </Group> ); }

function CircleSize() {
  return (
    <Group>
      <CircleProgress value={50} size="50px" renderLabel={() => null} />
      <CircleProgress value={50} size="100px" renderLabel={({ value }) => <Text fontSize="24px">{value}%</Text>} />
      <CircleProgress value={50} size="200px" renderLabel={({ value }) => <Text fontSize="48px">{value}%</Text>} />
    </Group>
  );
}

API

Progress

字段	描述
value	number = 0 进度条百分比
min	number = 0 最小值
max	number = 100 最大值
size	string 圆的大小
lineColor	string 进度条颜色值
lineWidth	string 线条粗细
renderLabel	(payload: RenderLabelPayload) => ReactNode = value => value 自定义 label