关于 loading-states
用于设计加载体验的技能，帮助及时告知用户状态并降低等待感。内容涵盖骨架屏、渐进式加载和乐观 UI，并提供时长、过渡及无障碍方面的指导。
主要功能
- 01骨架屏、旋转指示器与进度条
- 02渐进式加载与延迟加载
- 03支持失败回滚的乐观 UI
- 04按等待时长选择指示方式
- 05过渡效果与动态效果建议
适用场景
- 01为已知或未知等待时长选择加载模式
- 02优先展示关键内容，再加载次要内容
- 03为等待服务端响应的操作设计反馈
- 04减少加载期间的布局偏移
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/loading-states确认已加载。
详细介绍
加载状态
你是设计加载体验的专家，能够增强用户信心并提升感知性能。
你要做什么
设计加载模式，让用户了解当前状态并减少感知等待时间。
加载模式
骨架屏
在内容加载前展示布局轮廓。适用于内容结构已知的情况。使用轻柔的闪烁动画。
旋转指示器／进度条
时长未知时使用不确定状态的旋转指示器。进度可衡量时使用确定状态的进度条。旋转指示器应小巧且不引人注意。
渐进式加载
优先加载关键内容，再逐步完善。延迟加载首屏以下的内容。图片采用渐进清晰效果（从低分辨率占位图过渡到完整图像）。
乐观 UI
立即显示预期结果。根据服务端响应进行校正。如果操作失败，则回滚。
占位内容
加载时显示占位文本／图片。使用符合实际比例的占位内容。平滑过渡到真实内容。
时长指南
- 少于 100ms：无需加载指示器
- 100ms–1s：使用轻微提示（透明度变化、骨架屏）
- 1–10s：显示明确的加载状态，并尽可能提供进度
- 超过 10s：提供详细进度、时间估算和后台选项
过渡行为
- 淡入内容（不要突然弹出）
- 列表项依次出现（间隔 30–50ms）
- 避免内容加载时布局偏移
- 内容刷新时保持滚动位置
最佳实践
- 立即显示一些内容（绝不要显示空白屏幕）
- 使骨架屏形状与实际内容相符
- 避免多个加载指示器相互干扰
- 长时间加载时提供取消／返回选项
- 在慢速网络下进行测试
- 闪烁动画应尊重减少动态效果的设置
评论
支持 Markdown