Neumorphism UI

Progress

用于展示上传或导入等进行中任务的完成程度。

预览

百分比、数量与等待状态

比较 Registry 构建 82%、主题令牌 12/16，以及等待确定数值的进度显示。

Registry 构建82%
x
主题 token12 / 16
x
等待数据—
x

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/progress

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

传入当前 value 与总量 max，并用 aria-label 或 aria-labelledby 提供任务名称。真实任务应将显示值连接到进度状态。

"use client";

import { Progress } from "@/components/ui/progress";

export default function Example() {
  return <Progress value={72} aria-label="File upload" />;
}

API 参考

使用 Base UI Progress 的 progressbar 语义。会规范化有效的 max 和 value；当 value 缺失或无效时，以 indeterminate 状态呈现。

组件属性类型默认值说明
Progressvaluenumber | nullnull当前进度值，会被限制在 0 与 max 之间。
Progressmaxnumber100大于 0 的总范围；无效时使用 100。
Progressaria-label / aria-labelledbystring—为进行中的任务提供无障碍名称。
ProgressgetAriaValueText(formattedValue: string, value: number | null) => string—在数值之外需要额外说明时生成 aria-valuetext。

无障碍

  • 01

    Progress 需要 aria-label 或 aria-labelledby，例如“文件上传”，以说明正在进行的任务。

  • 02

    即使页面显示了百分比，也不会自动与 progressbar 关联，必须显式连接标签。

  • 03

    将 value 设为 null 表示 indeterminate 状态，此时不要同时显示完成百分比。