纯 CSS @keyframes + transform: rotate() 是最轻量、兼容性好且易调试的加载转圈方案，支持 prefers-reduced-motion、无需 JS、IE11+ 全支持，正确写法需显式定义 from/to 角度并用 linear 保证匀速。
直接用 CSS @keyframes + transform: rotate() 是最轻量、兼容性最好、也最容易调试的方案，95% 的仪表盘加载场景都不需要 JS 或第三方库。
为什么不用 SVG 或 Canvas 做加载转圈
SVG 的 requestAnimationFrame 旋转要自己管帧率、暂停/恢复逻辑，且无法被 CSS prefers-reduced-motion 自动降级。而纯 CSS 方案天然支持系统级动画偏好设置，也不增加 bundle 体积。
- IE11 及以上、所有现代浏览器都支持
transform: rotate()动画 - 不需要监听数据状态变化，只要加个
class="loading"就能触发 - 动画卡顿时只需调低
animation-duration，无需重写逻辑
怎么写出不“抽搐”的平滑旋转
常见错误是只写 transform: rotate(360deg)，导致动画在 100% 关键帧处跳回 0°，产生视觉抽搐。必须显式声明起始角度，并用 animation-timing-function: linear 保证匀速。
`.loader {
animation: spin 1.2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}`
- 避免用
%单位写旋转（如rotate(100%)），某些浏览器解析不一致 - 不要给 loader 元素设
display: inline，否则 vertical-align 会引发意外偏移 - 如果父容器用了
transform（比如缩放或 3D 变换），可能干扰子元素 rotate，优先用will-change: transform提前告知渲染层
如何和仪表盘 UI 风格统一
加载动画不是独立组件，它得融入表盘整体视觉节奏。比如深色背景仪表盘配细线环 + 淡青色，浅色主题就用粗环 + 主品牌色；进度类仪表盘（如水位、CPU）可让加载环带轻微呼吸缩放，强化“正在采集”暗示。
- 用
border: 2px solid transparent+border-top-color实现单色环，比全边框更轻盈 - 配合
opacity: 0.7和filter: blur(0.5px)能柔化边缘，避免硬边割裂感 - 若仪表盘本身有阴影（
box-shadow），加载环也要加同参数阴影，否则像浮在半空
真正难的不是让圈转起来，而是让它转得“不突兀”——转速、粗细、颜色饱和度、与周边元素的间距，这些细节没对齐时，用户第一反应不是“在加载”，而是“这页面卡了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
