跳到主要内容
Termlib

UI 组件 · 反馈

加载中

Spinner

也叫：加载动画、转圈、Loading、Spin、菊花图

一个不停旋转的小图标，表示正在处理或等待数据，但不知道具体还要多久。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

点击「提交」后，按钮文字左侧出现一个 14px 的旋转图标，按钮变为不可点击，防止重复提交；表格切换筛选条件时，在表格区域上盖一层半透明白色遮罩，中间显示转圈和「加载中」，保留原有数据不清空。

发给

01判断

你的内容是这样吗？

对照两列，确认加载中是不是你要找的。

符合这些情况，用加载中

  • 点击按钮提交后等待接口返回，时间通常在一两秒内
  • 表格或卡片局部刷新，需要保留旧数据并提示正在更新
  • 等待时长无法预估，也拿不到进度百分比时

是这些情况，换成别的

  • 页面首次加载且内容结构已知，用骨架屏能减少跳动

    改用骨架屏

  • 上传、导出等长任务能拿到真实进度

    改用进度条

  • 等待超过十秒，只转圈会让用户以为页面卡死了

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    整个页面只放一个居中转圈，所有数据回来前一片空白

  2. 02

    提交按钮转圈时仍可点击，导致重复提交

  3. 03

    页面上同时出现五六个转圈，每个卡片各转各的

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一个旋转的圆环或点阵图标，可附带「加载中」文字，局部加载时常叠加一层半透明遮罩。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个缺了一段的圆环或一圈小圆点在旋转
  2. 2常出现在按钮内文字左侧，或区块正中央
  3. 3周围内容可能被一层半透明白色遮罩盖住

04解释

详细解释

加载中图标（俗称「转圈」「菊花」）用在等待时间不确定、一般只有一两秒的场合：点击提交后按钮里转圈、切换筛选条件后表格区域盖一层半透明遮罩加转圈、下拉刷新时顶部转圈。它只告诉用户「在处理，别急」，不告诉进度。

和 进度条 的区别：能算出完成比例时用进度条，算不出时用加载中。和 骨架屏 的区别：页面或卡片第一次加载、内容结构已知时，骨架屏先画出灰色轮廓，布局不会跳动；加载中适合局部刷新、按钮提交这种小范围等待。整页只放一个居中转圈、等所有数据回来才显示，是最常见也最让人焦虑的做法。

开发者信息
术语 ID
component-spinner
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-spin
  • .el-loading-mask
  • [class*="MuiCircularProgress-root"]
  • .t-loading
  • .n-spin-body
  • .spinner-border
  • .spinner-grow
  • .animate-spin
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • spinner
  • loader
  • loading
  • spin
  • loading-spinner
  • typing
  • typing-indicator
  • loading-dots
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Spinner
  • Loader
  • Loading
  • Spin
  • CircularProgress
  • TypingIndicator
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30