显示与任务相关的进度条。
<Box maxWidth="300px"> <Progress /> </Box>
此组件继承自 进度组件 并支持 常用边距属性。
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
枚举
highContrast
布尔值
radius
"none" | "small" | "medium" | "large" | "full"
duration
字符串
使用 size 属性控制尺寸。
<Flex direction="column" gap="4" maxWidth="300px"> <Progress value={25} size="1" /> <Progress value={50} size="2" /> <Progress value={75} size="3" /> </Flex>
使用 variant 属性控制视觉样式。
<Flex direction="column" gap="4" maxWidth="300px"> <Progress value={25} variant="classic" /> <Progress value={50} variant="surface" /> <Progress value={75} variant="soft" /> </Flex>
使用 color 属性分配特定的 颜色。
<Flex direction="column" gap="4" maxWidth="300px"> <Progress value={20} color="indigo" /> <Progress value={40} color="cyan" /> <Progress value={60} color="orange" /> <Progress value={80} color="crimson" /> </Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Grid columns="2" gap="4"> <Progress value={10} color="indigo" /> <Progress value={10} color="indigo" highContrast /> <Progress value={30} color="cyan" /> <Progress value={30} color="cyan" highContrast /> <Progress value={50} color="orange" /> <Progress value={50} color="orange" highContrast /> <Progress value={70} color="crimson" /> <Progress value={70} color="crimson" highContrast /> <Progress value={90} color="gray" /> <Progress value={90} color="gray" highContrast /> </Grid>
使用 radius 属性分配特定的圆角值。
<Flex direction="column" gap="4" maxWidth="300px"> <Progress value={25} radius="none" /> <Progress value={50} radius="small" /> <Progress value={75} radius="full" /> </Flex>
使用 value 属性提供任务进度的精确指示。
value
<Progress value={75} />
使用 duration 属性指示不确定任务的大致持续时间。持续时间超时后，进度条将开始不确定动画。
<Progress duration="30s" />
当可以估计大致持续时间时，进度组件仍然比 加载动画 更实用，后者不提供任何关于任务进度的视觉线索。