按钮点击后需异步触发加载圈：先禁用按钮并插入 spinner 元素，再用 async/await 发起请求，finally 中恢复状态；css 推荐 border-spin（简单）或 inline svg（可控）；框架中须严格同步 loading 状态与请求生命周期。

按钮点击后如何显示加载圈而不卡死界面

加载圈必须用异步方式触发，否则 JavaScript 主线程被阻塞，DOM 不会更新。常见错误是把耗时操作（如 fetch）写在按钮点击事件里却没加 await 或没及时切换按钮状态。

• 先禁用按钮并替换文字或插入 <span class="spinner"></span>，再发起请求
• 不要用 setTimeout 模拟“等待”，真实请求必须靠 async/await 或 .then() 控制流程
• 务必在 finally 块中恢复按钮状态，避免请求失败后按钮永远卡在 loading

CSS 加载圈该用 border-spin 还是 SVG 动画

border-spin 兼容性好、代码少，但控制粒度低；SVG 更灵活，可精确配色、尺寸和旋转中心，适合设计系统统一规范。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 简单场景用：

  .spinner { width: 16px; height: 16px; border: 2px solid #eee; border-top-color: #333; border-radius: 50%; animation: spin 0.8s linear infinite; }

• 需要主题适配或暗色模式时，优先用 inline SVG：一个 <svg></svg> + <circle></circle> + stroke-dasharray 配合 CSS 变量控制颜色
• 注意 Safari 对 @keyframes 中 transform: rotate() 的兼容性，建议加 -webkit-transform

Vue/React 中怎么避免重复渲染 loading 状态

状态管理错位会导致 loading 圈闪一下就消失，或多次点击触发多个请求。关键不是“怎么加动画”，而是“状态和副作用是否严格同步”。

• React：用 useState 管理 isLoading，且只在 useCallback 封装的 handler 里置为 true，请求结束后设回 false
• Vue：避免在模板中直接写 v-if="loading && type === 'submit'" 这类耦合判断，应封装成计算属性 isSubmitting
• 防抖不适用此处——loading 是用户操作的即时反馈，必须响应每次点击，但需用 AbortController 或取消 pending 请求来避免竞态

移动端点击区域太小导致 loading 圈点不中

加载圈本身不是可点击元素，它只是视觉反馈。问题根源常是按钮 padding 不足或 min-width 没设，导致 iOS Safari 下点击热区过小。

• 给按钮加 min-width: 44px（iOS 最小触控推荐尺寸），配合 padding 保证内容可点
• 加载圈用 position: absolute 叠在按钮内，不占布局空间，避免按钮因插入元素而跳动
• 真机调试时用 Safari 开发者工具的 “Toggle Element Picker” 查看实际点击热区，别信 Chrome 模拟器

实际项目里最常漏掉的是错误恢复路径——比如网络断开时 loading 圈一直转，用户不知道发生了什么。loading 状态必须和 error、success 一起构成完整状态闭环，而不是单独加个动画就完事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！