120k
New

进度

PreviousNext

显示任务完成进度的指示器，通常显示为进度条。

Base UIReact AriaRadix UI
"use client"

import * as React from "react"

安装

pnpm dlx shadcn@latest add progress

用法

import { Progress } from "@/components/ui/progress"
<Progress aria-label="加载中" value={33} />

组合

带标签和值

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

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>上传进度</ProgressLabel>
  <ProgressValue />
</Progress>
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

标签

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

Upload progress56%
import {
  Progress,
  ProgressLabel,

受控

一个可以通过滑块控制的进度条。

"use client"

import * as React from "react"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

تقدم الرفع٥٦%
"use client"

import * as React from "react"

API 参考

请参阅 React Aria ProgressBar 文档。