Atelier UI

搜索组件…

搜索组件…

Progress Bar

支持确定与不确定状态的进度条,带标签、百分比和条纹动画。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

ProgressBarProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"div">, "children">

属性类型默认值说明
valuenumber | nullnullCurrent value. Omit (or pass `null`) for an indeterminate bar.
maxnumber100—
size"sm" | "md" | "lg""md"—
labelReact.ReactNode——
showValuebooleantrueShow the percentage next to the label. Ignored when indeterminate.
stripedbooleanfalseAnimated diagonal stripes on the fill.
barClassNamestring—Fill color classes, e.g. "bg-emerald-500".

安装

$ npx shadcn@latest add https://chromotion.dev/r/progress-bar.json

同类组件