110k
New

进度

PreviousNext

显示一个指示器，用于展示任务的完成进度，通常以进度条形式显示。

Radix UIBase UI
"use client"

import * as React from "react"

安装

pnpm dlx shadcn@latest add progress

使用方法

import { Progress } from "@/components/ui/progress"
<Progress value={33} />

示例

标签

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

Upload progress
import {
  Progress,
  ProgressLabel,

受控组件

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

"use client"

import * as React from "react"

RTL

要启用 shadcn/ui 中的 RTL（从右到左）支持，请参阅 RTL 配置指南。

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

import * as React from "react"

API 参考

请查看 Base UI Progress 文档。