推荐使用纯css实现移动端h5加载中旋转动画：通过border+border-radius绘制缺口圆环，配合@keyframes rotate实现匀速无限旋转，并用transform: translatez(0)触发gpu加速，同时添加role="status"和aria-live="polite"提升可访问性。
用纯 CSS 实现移动端 H5 的加载中旋转动画（Spinner），关键是利用 @keyframes 定义旋转，配合 transform: rotate() 和合适的尺寸、颜色、性能优化设置。下面是一个轻量、兼容性好、适配移动端的方案。
基础圆形旋转 Spinner（推荐）
这是最常用、视觉清晰、体积最小的实现方式：
- 使用一个空的
<div> 元素，通过 <code>border+border-radius: 50%绘制圆环 - 只设上边框为实色，其余三边透明，形成“缺口圆”，旋转时产生动态感
- 用
animation: spin 1s linear infinite实现匀速无限旋转 - 添加
will-change: transform或transform: translateZ(0)提升至 GPU 渲染，避免 iOS 卡顿 - 将宽度/高度设为
1.5rem（约 24px 在 16px 基准下），随根字体缩放自动适配 - 边框粗细用
0.1875rem（3px），保持比例一致 - 避免用
vw/vh，防止在小屏上过大或不可见 - 给 spinner 元素添加
role="status"和aria-live="polite"，让读屏器感知加载状态 - 配合 JS 控制显隐时，用
display: none或visibility: hidden，避免用opacity: 0单独隐藏（仍占空间且可能被聚焦） - 在弱网或长请求场景，可加文字提示如「加载中…」并和 spinner 同步显示/隐藏
- 用
<svg></svg>内嵌一个<circle></circle>或<path></path>，设置stroke-dasharray可做环形进度效果 - 旋转动画仍由
transform: rotate()实现，无需 JS - SVG 尺寸用
width="1em" height="1em"，完美继承父文字大小，响应式友好
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top-color: #007aff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
transform: translateZ(0); / 触发硬件加速 /
}
@keyframes spin {
to { transform: rotate(360deg); }
}
适配不同屏幕密度（Retina / 高 DPI）
移动端需兼顾高清屏，建议用 px 定义尺寸但搭配 device-pixel-ratio 媒体查询微调，或直接使用 rem / em 相对单位：
增强可访问性与用户体验
即使纯 CSS，也应考虑语义和交互场景：
备选：更简洁的单元素 SVG 方案（CSS 驱动）
如果项目允许内联 SVG，它比 border 圆环更锐利、缩放无锯齿，且同样纯 CSS 控制动画：
不复杂但容易忽略细节——尺寸合理、触发硬件加速、兼顾语义和高 DPI，就能做出既轻量又专业的移动端 CSS Spinner。
