加载中

Spinner

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

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

详细解释

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

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

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

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

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

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

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