术语图鉴/UI/UX 设计/加载状态
←→切换Esc返回

加载状态 Loading / Skeleton

你可能会说

数据加载有点慢,帮我加个加载状态,别让页面干等着。

数据还没回来时显示的「请稍等」提示。

数据还没回来时显示的「请稍等」提示。可以是转圈圈、进度条、或灰色的骨架屏(模拟内容轮廓)。

也常被叫作Loading / Skeleton

生活类比

像餐厅等菜时给你的小食——告诉你「厨房在做了」,不至于干坐着焦虑。

🎮 动手试试

选择题选择一个你认为最合适的答案

关于「加载状态」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在数据请求时加个加载状态:先显示骨架屏占位,超过 3 秒没回来就显示进度条,出错显示重试。

容易混淆?这样区分

加载状态 Loading / Skeleton≠
UI UI

加载状态是特定的交互反馈(告诉用户「等一下」),UI 是界面的整体设计。

什么时候用

有异步数据请求

页面需要等待 API 返回数据时,用加载动画或骨架屏告诉用户「数据在路上」,避免用户以为页面卡死而关闭。

和 AI 协作时

想让 AI 做加载效果时,说「数据加载中显示骨架屏、超过 3 秒显示进度条、出错显示重试按钮」,AI 会覆盖多种加载状态。

什么时候不用

纯静态展示页

如果页面内容在 HTML 中直接写死、不需要请求后端接口,加载状态完全没有必要——内容瞬间呈现。

与快速响应的本地应用无关

本地原生应用数据读取在毫秒级完成,加 loading 反而造成闪烁干扰,可用乐观更新代替。

组成结构 · Anatomy

1
核心概念Core

数据还没回来时显示的「请稍等」提示。可以是转圈圈、进度条、或灰色的骨架屏(模拟内容轮廓)。

2
实际表现In Practice

像餐厅等菜时给你的小食——告诉你「厨房在做了」,不至于干坐着焦虑。

3
与 AI 的关联AI Context

和 AI 沟通时提到「加载的时候显示个动画」,就是在做加载状态。

典型使用场景

处理加载等待
告诉 AI「API 请求慢的时候别让页面空白,加个骨架屏模拟内容轮廓,请求失败就显示重试按钮」
想弄懂概念时
告诉 AI「用大白话给我解释什么是加载状态,举个生活中的例子」

延伸阅读