旋转加载圈
旋转加载圈是 Web 加载图标的“标准答案”：一个圆形元素只给上边框上色，其余边框半透明，animation: rotate 1s linear infinite 无限转。
变形版本：双层旋转圈（一正一反）、百分比数字随转动递增、圆环描边动画（stroke-dashoffset）。Material 的圆形进度条就是 stroke 描边动画做的。
- border-top 单色 + 其他边框淡色 + linear 无限旋转
- 两层反向旋转（animation-direction: reverse）更有层次
- SVG stroke-dasharray/dashoffset 可做精确进度环
HTML
<style> .spin { display: flex; gap: 30px; justify-content: center; padding: 40px 0; } .spin div { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(74,158,255,.2); border-top-color: #4a9eff; animation: spin 1s linear infinite; } .spin .rev { border: 4px solid rgba(247,120,186,.2); border-top-color: #f778ba; animation: spin 1.4s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="spin"><div></div><div class="rev"></div></div>
本节要点加载圈 = 单边框上色 + linear 无限旋转；反向双圈与渐变描边是常见升级。
