Progress.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/progress.tsx

功能描述

进度条组件，用于显示操作进度。基于 Radix UI，支持自定义颜色和平滑动画。

导出内容

• Progress - 进度条组件

Props 接口

Progress

属性	类型	必填	默认值	说明
value	number	否	0	当前进度值 (0-100)
className	string	否	-	自定义CSS类名
...props	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>	否	-	Radix Progress 属性

依赖

• @radix-ui/react-progress - Radix UI 进度条原语
• @/lib/utils - 工具函数 (cn)

使用示例

import { Progress } from "@/components/ui/progress";
import { useState, useEffect } from "react";

// 基础用法
<Progress value={33} />

// 动态进度
function ProgressDemo() {
  const [progress, setProgress] = useState(13);

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress value={progress} className="w-[60%]" />;
}

// 带标签
<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>上传进度</span>
    <span>{progress}%</span>
  </div>
  <Progress value={progress} />
</div>