正确做法是为加载状态预留固定宽度容器，用绝对定位将旋转图标覆盖在按钮上，设transform-origin: center确保绕中心旋转，并在请求finally中移除loading类以避免状态残留。
按钮点击后如何显示旋转加载动画而不影响布局
直接给 button 加 animation: spin 1s linear infinite 会导致文字被挤偏或按钮尺寸跳变。根本原因是默认的 display: inline-block 下，旋转动画会触发重排，且未预留图标空间。
正确做法是提前为加载状态预留固定宽度容器，并用绝对定位把旋转图标「盖」在按钮内容上：
- 给按钮设
position: relative，内部用（Bootstrap 5）或自定义 - 加载图标设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，避免偏移 - 原始文字用
opacity: 0+pointer-events: none隐藏，而不是display: none（否则宽高归零，布局塌陷）
用 CSS @keyframes 实现平滑旋转而非闪烁
常见错误是写 from { transform: rotate(0deg); } to { transform: rotate(360deg); }，但没加 transform-origin，导致图标绕左上角转，视觉抖动明显。
必须显式指定旋转中心点：
@keyframes spin {
from { transform: rotate(0deg) translate(-50%, -50%); }
to { transform: rotate(360deg) translate(-50%, -50%); }
}
.loading-icon {
animation: spin 1.2s linear infinite;
transform-origin: center; /* 关键：确保绕自身中心转 */
}
注意：不要用 rotateZ()，部分旧版 Safari 对 Z 轴支持不稳定；统一用 rotate() 更稳妥。
与 Bootstrap 5 的 btn 类共存时的样式冲突点
Bootstrap 5 的 .btn 默认有 white-space: nowrap 和 text-align: center，如果加载图标宽度超过按钮内边距，会溢出或遮挡边框圆角。
- 给按钮加
padding-left: 2rem（假设图标宽 1.5rem），再用padding-right: 1.5rem平衡视觉 - 禁用
white-space: nowrap仅对加载态生效：.btn.loading { white-space: normal; } - 若用 Font Awesome 图标，确保引入的是
fa-solid版本，fa-regular在某些字体加载延迟时会短暂显示为空心方块
JavaScript 控制加载态切换的边界条件
只靠 btn.classList.add('loading') 不够——用户快速连点、网络超时、请求被取消，都可能让按钮卡在加载态。
- 务必在
fetch或axios的finally块里调用btn.classList.remove('loading') - 添加防重复提交逻辑：
if (btn.disabled) return;放在事件处理器开头 - 避免用
setTimeout模拟加载态，真实接口响应时间不可控；宁可加个abortController主动清理
最易被忽略的是：加载动画结束后，如果按钮文字是动态拼接的（比如「提交中…」→「提交成功」），记得恢复原始文本内容，而不是只删 class——否则二次点击时文案错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
