CSS 加载动画合集（12 款 Spinner 源码复制即用）
12 款纯 CSS 加载动画 Spinner 合集：旋转环、点阵、波纹、心跳、进度条等，HTML+CSS 直接复制可用，含参数调节说明。
效果演示（真实可交互）
完整代码（HTML + CSS）
直接复制到你的页面即可使用，无需任何 JS：
<!-- 1. 旋转环 -->
<div class="spinner-ring"></div>
<style>
.spinner-ring {
width: 44px; height: 44px;
border: 4px solid rgba(108,140,255,.15);
border-top-color: #6c8cff;
border-radius: 50%;
animation: rot .8s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>/* 其余 11 款见上方演示区样式（.sp-* 系列），
复制对应类 + @keyframes 即可。全部纯 CSS，零依赖。 */参数说明
| 参数 | 位置 | 说明 |
|---|---|---|
| 动画时长 | animation: xxx .8s | 数字越小转得越快 |
| 颜色 | border-top-color / background | 改成你的主题色 |
| 尺寸 | width/height | 按比例缩放 |
| 缓动 | ease-in-out / linear | 控制加速减速节奏 |
兼容性与性能
- 全部使用 CSS transform 和 opacity 动画（GPU 加速），60fps 流畅
- 兼容 Chrome / Firefox / Safari / Edge 最新版
- 单个 spinner 体积 < 1KB，对性能零影响
- 大量使用时注意：
animation动画元素过多会占用合成层，建议页面同时不超过 20 个
常见问题
Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。
Q: 怎么改颜色？ 找对应类的 border-top-color 或 background 属性替换即可，演示区 12 款各有注释。
Q: 加载完怎么隐藏？ 在页面 load 事件里给容器加 display:none 或移除类名即可。
常见问题
这个组件可以商用吗？
可以。本组件为粤喵自研原创，可免费用于个人和商业项目，无需署名。
浏览器兼容性如何？
支持所有现代浏览器（Chrome / Firefox / Safari / Edge 最新版本）。旧版 IE 不支持 CSS 动画相关特性。
怎么修改动画参数？
直接调整 CSS 中的 animation-duration（时长）、animation-timing-function（缓动曲线）等属性即可，代码中有注释说明。