HTML图标旋转加载结构_HTML等待状态UI实现-html教程-PHP中文网

最简单可靠的方式是用transform-origin: center配合@keyframes和animation: spin 1s linear infinite；必须设display: inline-block并避免字体加载跳动或disabled导致动画冻结。

html图标旋转加载结构_html等待状态ui实现

用 `transform: rotate()` 实现平滑旋转图标

纯 CSS 实现加载图标旋转最简单可靠，不需要 JS 控制生命周期。关键不是加 animation，而是确保图标的 transform-origin 在中心，否则会偏移抖动。

常见错误是直接对 <i class="icon-loading"></i> 加动画，但图标字体（如 Font Awesome）默认 baseline 对齐，视觉上会“跳”。

给图标元素设 display: inline-block 或 display: block
显式设置 transform-origin: center（不要依赖默认值）
动画用 infinite linear，避免 ease 导致速度不均
若用 SVG，优先内联 <svg></svg> 并设 viewBox，避免外部引用尺寸失控

.loading-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

避免 `font-display: swap` 导致图标闪动

使用图标字体时，如果 CDN 加载慢，浏览器先渲染空白或方块，等字体就绪后突然“跳”成图标——这在加载状态里特别刺眼，用户会误以为操作卡死。

根本原因不是动画本身，而是字体加载策略。不能靠 JS 监听 fontload 再显示，因为加载状态 UI 必须「立刻可见」。

改用本地托管的图标字体，并在 @font-face 中设 font-display: block（强制等待字体加载完成再渲染）
更推荐：直接用 SVG Sprite 或 inline SVG，彻底绕过字体加载问题
若必须用远程图标字体，至少加 font-display: optional + fallback 字符（如 ●），比空白好

按钮禁用态下旋转图标要同步控制 `pointer-events`

点击按钮触发异步请求后，常把按钮设为 disabled 并插入旋转图标。但原生 button[disabled] 会禁用所有子元素交互，导致图标动画被浏览器暂停（尤其 Safari 和旧版 Chrome）。

Wechat HTML Publisher

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

下载

这不是 bug，是规范行为：禁用按钮内所有内容进入非活动状态，CSS 动画也会冻结。

别用 disabled，改用 aria-disabled="true" + 自定义样式（opacity: 0.6; cursor: not-allowed）
同时确保图标父容器未被设 pointer-events: none（检查 CSS 是否意外继承）
测试时在 Safari 开发者工具中勾选「Disable animations」看是否真停了——停了就是被禁用态影响