Progress
Progress component - hand-drawn style progress indicator with thick border
案例展示
Progress 在实际场景中的使用示例
文件上传进度
Uploading...0%
document.pdf (2.4 MB)
任务完成度
Design System100%
Component Development13%
Documentation30%
技能等级
React90%
TypeScript85%
CSS80%
Node.js70%
特殊 Pattern 和动效
使用 framer-motion 实现的各种动效样式
条纹动画 (Striped)
脉冲效果 (Pulse)
弹性动画 (Spring)
手绘抖动感 (Sketchy)
数值动画 (Animated Number)
Loading...0%
渐变色 (Gradient)
阶段颜色变化
不同进度阶段显示不同颜色
Low Progress (Red)20%
Medium Progress (Yellow)50%
High Progress (Green)85%
Dynamic Change25%
覆盖样式
通过 className 和 indicatorClassName 自定义样式
深色背景 + 圆角
无边框 + 大圆角
带阴影 + 高度自定义
方形风格
非异形样式
常规圆角和矩形的进度条样式
圆角 (rounded-full)
小圆角 (rounded-sm)
中等圆角 (rounded-md)
方形 (rounded-none)
不同进度值
展示不同进度百分比的效果
0%
25%
50%
75%
100%
不同尺寸
通过自定义高度实现不同尺寸
Extra Small (h-1)
Small (h-2)
Default (h-4)
Large (h-6)
Extra Large (h-8)
不同颜色
通过 indicatorClassName 自定义进度条颜色
Accent (默认)
Success
Warning
Destructive
Info