返回辨真假
辨真假
骨架屏 vs 旋转加载 vs 进度环 vs 进度条
Skeleton · Spinner · Progress Ring · Progress Bar
有形状占位、干等未知、环形进度、明确百分比
LIVE DEMO全量并排，直接切身感受差异
什么时候用哪个按成员拆开看场景，不再靠猜
骨架屏
Skeleton
- 页面结构基本确定，只是数据还没回来
- 想提前占住版面，减少跳动
- 适合卡片、列表、详情骨架
旋转加载
Spinner
- 只知道在加载，但不知道还要多久
- 等待动作比较短，不值得画完整骨架
- 适合按钮提交、局部刷新、状态切换
进度环
Progress Ring
- 需要展示进度，但空间比较紧
- 进度更多是概览感受，不一定强调精确数字
- 适合上传、同步、任务完成度小组件
进度条
Progress Bar
- 需要清楚表达当前进度和剩余量
- 横向空间充足，适合放百分比或分步说明
- 适合安装、下载、长任务流程
各自的提示词当前按 Web 组织，复制即可继续指挥 AI
骨架屏
Skeleton
文章加载前显示骨架屏（Skeleton）：灰色长条仿标题、方块仿封面，数据到了再替换成真内容
旋转加载
Spinner
点击「提交」后按钮（Button）内显示 Spinner，文案变「提交中…」，期间禁用重复点击
进度环
Progress Ring
在上传区显示进度环（SVG stroke-dashoffset）：圆环随上传百分比描满，中心显示「68%」，完成后变对勾
进度条
Progress Bar
上传文件时显示进度条（Progress）：实时更新 0-100%，旁边显示「已上传 3.2MB/5MB」