纯css可实现提交按钮禁用时自动显示旋转圆圈动画：利用:disabled伪类触发::after生成的圆形边框+@keyframes旋转，无需js控制启停；关键包括border-radius:50%、单边着色、animation:spin linear infinite及兼容性处理。
表单提交时用 CSS 实现纯圆形加载动画
不需要 JavaScript 控制动画启停，也能让提交按钮在 type="submit" 状态下自动切换为旋转圆圈——关键在于利用表单的 :disabled 伪类 + CSS 动画。浏览器原生提交触发 submit 事件后，如果立即禁用按钮（常见做法），就能靠这个状态变化驱动样式切换。
常见错误是直接对 :hover 或 :active 做动画，但这些状态不覆盖提交中的真实状态；更糟的是用 display: none 隐藏按钮再 show 加载图标，会导致表单可能被重复点击。
- 给提交按钮添加
disabled属性（JS 中button.disabled = true）是可靠触发点 - 用
border+border-radius: 50%拼出空心圆，再通过border-top-color单边着色实现旋转“进度感” - 动画必须用
animation: spin 1s linear infinite，不能用transition，后者无法形成持续旋转
按钮禁用时显示旋转圆圈的完整 CSS 写法
核心是把按钮默认内容（如“提交”文字）和禁用态的圆圈放在同一元素内，用 position: relative / absolute 叠加，再靠 visibility 或 opacity 控制显隐。避免用 height: 0 或 overflow: hidden，否则读屏器可能误读。
.submit-btn {
position: relative;
padding: 12px 24px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-btn:disabled {
background: #007bff;
color: transparent;
}
.submit-btn:disabled::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
注意：不要用 border: 2px solid transparent 再单独设 border-top，Safari 旧版本会渲染异常；margin 偏移比 transform: translate(-50%, -50%) 更兼容。
JS 中正确触发禁用与恢复的时机
不能在 submit 事件里只写 event.preventDefault() 就完事——那样按钮永远不会禁用，加载动画出不来。也不能在 AJAX then 里才恢复按钮，万一请求卡住或失败，按钮就永远灰了。
- 在
form.addEventListener('submit', ...)回调开头立即设置button.disabled = true - 恢复按钮必须放在所有异步路径的终点：
fetch().then().catch()的两个分支里都执行button.disabled = false - 如果用
XMLHttpRequest，需在onload和onerror中都恢复 - 别忘了处理网络中断：加个超时
setTimeout，比如 15 秒后强制恢复按钮并提示“请重试”
移动端点击区域与可访问性注意事项
小圆圈本身点击无效，但用户可能误以为它是个按钮；更实际的问题是，iOS Safari 在禁用按钮上仍会响应 touchstart，导致视觉反馈错乱。
- 给禁用态按钮加
pointer-events: none，彻底阻止后续触摸事件 - 圆圈尺寸至少保持
16px × 16px，满足 WCAG 最小点击区域要求 - 用
aria-busy="true"和aria-live="polite"配合屏幕阅读器（例如：<button aria-busy="true" aria-live="polite">提交中…</button>） - 避免在圆圈上加
title属性——禁用元素的title在多数浏览器中不显示
最易被忽略的一点：动画帧率在低端 Android 设备上可能掉帧，建议把 animation-duration 设为 0.8s 而非 1s，人眼对稍快的旋转更不易察觉卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
