纯CSS旋转Loader应使用@keyframes定义transform rotate动画，配合will-change: transform和rem+vw/min-max适配，严格遵循Safari兼容写法，并强制支持prefers-reduced-motion降级。
怎么用纯CSS实现不卡顿的旋转Loader
浏览器主线程不阻塞，动画必须走 transform 和 opacity，其他属性（比如 width、background-position）会触发重排或低效重绘。直接上 @keyframes + animation 是最稳的路径。
- 只对
transform做旋转：用rotate(0deg) → rotate(360deg)，别用border-radius动画模拟“转圈” - 加
will-change: transform提前告诉浏览器这个元素要动，尤其在低端安卓 WebView 里能明显减少掉帧 - 避免用
animation-timing-function: step-start做“齿轮式”转动——它不是真正意义上的旋转动画，视觉卡顿且语义错误
CSS Loader 在 Safari 上不动？检查这三处
Safari（尤其是 iOS 15 及更早）对 @keyframes 的解析比 Chrome 更严格，常见静止现象基本是语法或兼容性问题。
-
@keyframes名称不能含大写字母或下划线，写成loader-spin没问题，但LoaderSpin或loader_spin在旧 Safari 里可能被忽略 - 必须显式声明
from和to，不能只写0%和100%—— iOS Safari 14.5 之前有解析 bug - 如果父容器用了
transform: scale(0.99)这类非 1 缩放，某些 Safari 版本会禁用子元素的transform动画，临时加transform: translateZ(0)可绕过
如何让 Loader 大小适配不同设备又不模糊
用像素值（px）写宽高容易在高清屏上发虚，用 em 或 rem 又难控制绝对大小。折中方案是用 vw + min/max-width 锁死范围。
- 基础尺寸设为
width: 2rem; height: 2rem;，再用min-width: 24px; max-width: 48px;防止在极小或极大字体设置下失控 - 边框类 Loader（如环形）优先用
border: 2px solid而非box-shadow模拟，后者在缩放时边缘易糊 - 如果用伪元素（
::after）画圆环，确保border-radius: 50%后没被父容器的overflow: hidden截断——有些安卓 UC 浏览器会误裁切动画中的圆角
要不要加 prefers-reduced-motion 支持
要。不是“可选”，而是实际项目上线后用户反馈最多的无障碍问题之一：动画持续旋转引发眩晕，尤其在表单提交后长时间挂起时。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-reduced-motion: reduce)把animation改成animation: none或降级为静态 loading 文字 - 别只停掉旋转，还要同步处理状态逻辑——比如 JS 里监听
window.matchMedia('(prefers-reduced-motion)')，避免动画停了但遮罩层没关 - 测试时手动开启系统设置：macOS 系统设置 > 辅助功能 > 显示 > 减少运动；iOS 设置 > 辅助功能 > 动态效果 > 减少动态效果
真正难的不是画出那个圈，是让它在各种屏幕、各种系统、各种用户设置下都不出错——特别是 prefers-reduced-motion 这种一漏就整块不可用的点，上线前很容易被跳过。
