Progress

一条细长的倾斜轨道，以强调色填充；设置 segments 后变为一排逐格点亮的小格，形如充能槽。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/progress

示例

进度条、充能槽与未知进度

Uploading the route

Charges

Finding a driver

progress-kinds.tsx

import { useEffect, useState } from "react";import {  Progress,  ProgressLabel,  ProgressValue,} from "@/components/zero/progress";export default function ProgressKinds() {  const [value, setValue] = useState(20);  useEffect(() => {    const timer = setInterval(      () => setValue((current) => (current >= 100 ? 0 : current + 10)),      900,    );    return () => clearInterval(timer);  }, []);  return (    <div className="grid w-full max-w-md gap-6">      <Progress value={value}>        <ProgressLabel>Uploading the route</ProgressLabel>        <ProgressValue />      </Progress>      <Progress value={value} segments={10}>        <ProgressLabel>Charges</ProgressLabel>        <ProgressValue />      </Progress>      <Progress value={null}>        <ProgressLabel>Finding a driver</ProgressLabel>      </Progress>    </div>  );}

行为

不传数值（value={null}）时表示进度未知：一小段色块在轨道上来回扫动。系统开启「减少动态效果」时不再扫动，改为以暗色静态填满整条轨道。

进度条的 ARIA 角色为 progressbar，可访问名称取自其标签；ProgressValue 显示格式化后的数值，并接受 Base UI 的 format。

属性

Progress

属性	类型	默认值	说明
value	number \| null	—	当前进度；未知时为 null。
segments	number	—	将进度条等分为指定数量的小格，进度每覆盖一格即点亮该格。
min / max	number	0 / 100	取值范围。

另可传入 Base UI Progress.Root 的全部属性。

ProgressLabel, ProgressValue

另可传入 Base UI Progress.Label 的全部属性。