加载指示 · Loading Indicator
英文：Loading Indicator
动效与交互难度：入门 ★
🗣️一句话大白话
转圈、进度环、进度条等“正在加载”的视觉反馈。区别于骨架屏：不模拟内容形状，是通用指示器。加载指示器三型：spinner（转圈，<1s 场景）、进度条（线性，2s 内）、进度环/百分比（>2s 或可量化）。告诉 AI 场景选型即可。要点：指示器必须“在动”（静止的转圈会被当 bug）；与文案配合（“加载中…”）；超过 3 秒要给进度而非无限转圈。
🎬真实场景
按钮提交中、页面加载、上传下载、数据请求
📮你可以这样说
「【图像模型版】[按钮] 提交中显示小号 spinner 转圈（约 1s/圈），禁用按钮防重复点击；超过 2 秒的操作用进度条或百分比。 【HTML/CSS/JS 版】[按钮] loading 态插入 spinner 元素，CSS animation rotate 1s linear infinite；长任务用 [进度条] 按真实进度更新宽度。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：加载指示=装饰；它是“系统在工作”的信任信号
- ▸无限转圈超过 3 秒会让用户怀疑卡死
🚫什么时候别用
- ✗<200ms 的瞬时操作（不需要指示器，直接完成）
🧩常见变体
spinner 转圈线性进度条进度环百分比
💡小贴士
- ✦>3 秒给进度条/百分比，别无限转圈
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗