组件 · 反馈 · 19
进度条 进度条 = 已知时长用确定型进度条，未知等待用转圈，且必须配上文字标签。
直达修改 Prompt →
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a progress component.
STYLE
- 6px track #E5E5EA, 3px radius, #0071E3 fill with a 240ms width ease
- a 12px label above the track naming the work, percentage on the right
- a 16px indeterminate spinner variant for unknown totals
- complete state swaps the fill to #34C759 for 400ms
STATES
- indeterminate, in progress, complete, error #FF3B30
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing progress bar announce completion.
Use:
- the fill turns #34C759 for 400ms at 100%, then holds
- the label swaps to a finished phrase, not “100%”
- keep track size, radius and easing unchanged
Only add the complete state.
Create a progress component, replacing the existing one.
Requirements:
- 6px track, 3px radius, accent fill with a 240ms width ease
- a 12px label above naming the work, percentage right-aligned
- a bar, a 40px circle, and a 16px indeterminate spinner variant
- complete: fill turns #34C759 for 400ms and the label confirms
- error: fill #FF3B30 with a 12px reason under the track
Keep the surrounding card layout unchanged.
MOTION
- Determinate: transform scaleX over 300ms ease-out. Never animate width.
- Indeterminate: 1.2s linear loop. No easing on a loop.
- Do not pulse the whole bar opacity; it reads as broken.
- prefers-reduced-motion: keep the value change, drop the loop.
修改类 Prompt 只动目标，不碰页面其余部分。
进度条是什么？ 进度条告诉用户还要多久。点名轨道、填充，以及等待时长是已知还是未知。
变体 点击属性即可在预览中高亮。
条形 在 Prompt 里写明这个类型。
环形 在 Prompt 里写明这个类型。
不确定 在 Prompt 里写明这个类型。
轨道 给具体值，不要只给感觉词。
填充 给具体值，不要只给感觉词。
数值 给具体值，不要只给感觉词。
标签 字段的名称文字，简短并置于输入框上方。
尺寸 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
不确定 在 Prompt 里写明这个状态。
进行中 在 Prompt 里写明这个状态。
完成 在 Prompt 里写明这个状态。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 已知字节数的文件上传 多步流程显示第 2 / 4 步 超过一秒且总量未知的等待 什么时候别用 等待不足 300 毫秒——什么都别显示 总量未知且等待很长——改用骨架屏 阻塞页面且需要决策——改用对话框 A bar that moves but never finishes is worse than a spinner — if the total is unknown, say so with indeterminate.
复制 Prompt Create a progress component.
STYLE
- 6px track #E5E5EA, 3px radius, #0071E3 fill with a 240ms width ease
- a 12px label above the track naming the work, percentage on the right
- a 16px indeterminate spinner variant for unknown totals
- complete state swaps the fill to #34C759 for 400ms
STATES
- indeterminate, in progress, complete, error #FF3B30
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui