跳到主要内容
前端术语库

加载状态

Loading State

交互模式也叫:Loading、加载中、载入状态

一句话:数据或操作还没完成时给用户的反馈,常见形式有转圈图标、骨架屏、进度条和按钮加载态。

详细解释

只要有等待,就要让用户知道「系统在处理,没有卡死」。不同场景用不同形式:整块内容首次加载用 骨架屏,按内容的大致形状显示灰色块;局部刷新或短时间等待用转圈图标;耗时长且能算出进度的(如上传)用进度条;点击提交后按钮本身进入加载态,并禁止重复点击。

很快就结束的请求(300ms 以内)可以不显示加载,避免界面闪一下。加载状态还要和空状态、错误状态分开设计:还在加载、没有数据、出错了,是三种不同的画面。

跟 AI 提需求时,指明用哪种加载形式、放在哪里、加载期间哪些操作要禁用。

示例

灰度线框示意,只表达结构,不代表具体视觉风格。

怎么跟 AI 说

可以直接贴给 Cursor、Claude Code 等工具,把里面的业务内容换成你自己的。

订单列表首次加载时显示 5 行骨架屏,形状和真实行一致;点击「刷新」时只在列表顶部显示小的转圈图标,不清空已有数据;提交按钮点击后显示转圈图标和「提交中…」,接口返回前禁止重复点击。