进度

一条细长的进度条，会在任务完成时逐渐填满——例如上传、安装、多步骤入门流程等——并采用新粗野主义风格的边框与阴影处理效果。

"use client"

import * as React from "react"

进度条用来报告任务完成了多少——一条从 0 填到 100 的轨道。它基于 Base UI Progress 组件构建，并按新粗野主义的配方设计：粗边框、硬阴影、实心填充。

适合以下场景：

文件上传与下载——由字节驱动的确定进度，并显示百分比。
多步流程——引导、结算与向导；进度条显示用户走到哪一步。
长时间任务——从服务端回报完成度的导入、导出与安装。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

安装以下依赖：


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

更新导入路径以匹配您的项目结构。

用法

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

<Progress value={33} />

组合

带标签和值

使用 ProgressLabel 和 ProgressValue 添加标签和值的显示。

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

示例

受控

一个可由滑块控制的进度条。

"use client"

import * as React from "react"

RTL

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

تقدم الرفع

"use client"

import * as React from "react"

进度条是状态指示器，不是控件——永不获得焦点，也没有键盘交互。Base UI 渲染带 aria-valuemin、aria-valuemax 与 aria-valuenow 的 role="progressbar"，ProgressLabel 会通过 aria-labelledby 自动关联——请优先使用它（或 aria-label），避免无标签进度条，让屏幕阅读器不仅读出百分比，也能读出正在加载什么。完成度未知时传入 value={null}，进度条会切换为不确定状态。

API 参考

更多信息请参阅 Base UI 文档。