HTML中怎么给按钮添加正在加载的旋转图标？样式设计-html教程-PHP中文网

用 css 实现按钮内嵌旋转图标需通过 :disabled::after 触发动画，配合 @keyframes spin、border 绘圆环、currentcolor 继承颜色及 0.8s linear infinite 匀速旋转，避免 js 操作 class 或 display 导致重排，确保禁用时自动显示、启用时平滑隐藏。

html中怎么给按钮添加正在加载的旋转图标？样式设计

用 CSS 动画实现按钮内嵌旋转图标，不依赖 JS 控制显隐

直接在按钮里放一个 <span></span> 或伪元素，配合 @keyframes 做无限旋转动画，比频繁切换 class 更轻量。关键不是“加图标”，而是让图标在按钮禁用时才出现、启用时隐藏——否则用户会误以为还在加载。

常见错误是把旋转动画写死在按钮上，导致按钮一渲染就转，或者用 JS 频繁操作 display: none 引起重排。正确做法是用 opacity + visibility 控制视觉状态，用 pointer-events: none 配合 disabled 属性确保不可点。

推荐用伪元素 ::after 实现，避免额外 DOM 节点；图标用 border 画圆弧 + transform: rotate() 实现，兼容性好且无需字体或 SVG
动画时长设为 0.8s，太快显得急促，太慢影响反馈感
旋转颜色建议和按钮主色一致，用 currentColor 继承文字色，避免硬编码颜色值

按钮禁用时自动显示加载图标，启用时自动收起

靠 CSS 的 :disabled 伪类联动控制，而不是靠 JS 切换 class。这样逻辑更干净，也避免 JS 执行失败导致图标卡死。

注意：原生 <button disabled></button> 会自动失去焦点和点击响应，但部分 UI 框架（如 Ant Design）用 disabled 属性模拟禁用态，实际没加 disabled 属性，此时需配合自定义 class 如 .is-loading 使用。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

纯 CSS 方案示例：

button:disabled::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

若按钮用了 background 渐变或图片，旋转图标可能被遮挡，需加 z-index 或调整 position: relative + absolute
移动端要注意 min-width，防止旋转图标挤掉文字，建议按钮最小宽度设为 100px 以上

用 SVG 内联方式替代 border 旋转，支持自定义形状和颜色

当需要更精细控制（比如带缺口的环、渐变色、品牌图标），SVG 是更稳妥的选择。直接把 SVG 写进 HTML，用 <svg><circle></circle></svg> 或 <path></path> 描边，再用 stroke-dasharray + stroke-dashoffset 做环形进度式旋转，视觉更专业。

容易忽略的是 SVG 的 viewBox 和尺寸匹配问题：如果 SVG 宽高设为 16x16，但容器宽高是 20px，会导致留白或裁剪。必须统一单位或用 width/height: 1em 靠文字大小缩放。

内联 SVG 示例：

<button disabled>
  提交
  <svg viewbox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="56.55" stroke-dashoffset="0"><animate attributename="stroke-dashoffset" from="0" to="56.55" dur="0.8s" repeatcount="indefinite"></animate></circle></svg></button>

动画用 <animate></animate> 标签比 CSS @keyframes 更精准控制描边起点，但 Safari 对内联 SVG 动画支持略弱，可降级为 CSS 版本
不要用外部 SVG 文件（<img src="spin.svg">），无法继承 currentColor，也无法用 CSS 控制动画

React/Vue 等框架中避免重复渲染导致动画重置

组件重新 render 时，如果旋转图标是通过条件渲染（如 {loading && <spinner></spinner>}）插入的，每次 loading 变化都会销毁重建节点，动画会从头开始闪一下。这不是样式问题，是 React 的 key 或 Vue 的 v-if/v-show 机制导致的。

真正要解决的是“保持 DOM 节点复用”：用 v-show（Vue）或 style={{ visibility: loading ? 'visible' : 'hidden' }}（React），而不是 v-if 或条件渲染。

React 推荐写法：

<button disabled style="{{" position:>
  {text}
  <span style="{{" position: left: top: transform: opacity: loading : pointerevents:>
    <loadingicon></loadingicon></span>
</button>