本文目录
什么是 CSS 加载器，以及它为何重要
CSS 加载器是一种轻量的动画指示器，用于告诉用户后台正在进行某些操作。无论页面是在获取数据、处理文件，还是在等待 API 响应，一个设计精良的加载器都能防止用户误以为应用已经卡死。
与基于 GIF 或 JavaScript 的加载动画不同，纯 CSS 加载器与分辨率无关、文件体积极小，且能在任意设备上流畅渲染。它们不需要任何外部依赖，可以直接集成到样式表中，因而成为现代 Web 应用的首选。
CSS 加载器生成器的工作原理
该生成器让你可以直观地自定义加载动画，并即时复制可直接用于生产的 CSS 代码。
- 选择加载器样式——从旋转器、圆点、条形、脉冲、圆环等常见动画样式中挑选适合你设计的一种
- 自定义外观——调整尺寸、颜色、动画速度和粗细，以匹配你的品牌或设计系统
- 复制代码——生成器会输出简洁、精简的 CSS（含关键帧动画）以及渲染加载器所需的 HTML 标记
- 粘贴使用——将 CSS 放入样式表，并在需要加载指示器的位置添加对应的 HTML 元素
免费试用 —— 无需注册
打开 CSS 加载器生成器 →何时使用 CSS 加载器
在许多常见场景中，加载指示器都能提升用户对性能的感知和满意度。
- 获取 API 数据——在应用从服务器加载数据时显示一个加载动画，让用户知道界面依然响应并在正常工作
- 表单提交——用户点击提交后显示加载器，表明请求正在处理，同时防止用户重复点击
- 页面切换——在单页应用的路由切换过程中使用加载器，衔接内容切换之间的空档
常见问题
CSS 加载器比 GIF 加载动画更好吗？
大多数情况下是的。CSS 加载器基于矢量，因此在视网膜屏上依然清晰锐利；它们的代码通常不到 1 KB；而且可以通过 CSS 变量自定义，无需创建新的图片文件。GIF 加载动画是位图图像，在高 DPI 屏幕上可能显得模糊，还会增加额外的 HTTP 请求。
CSS 加载器在所有浏览器中都能用吗？
现代 CSS 动画和关键帧在所有当前浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。生成的代码使用标准 CSS 属性，不带浏览器前缀——对于动画支持来说，这些前缀已不再需要。
如何将 CSS 加载器在页面上居中？
在父容器上使用 CSS Flexbox 或 Grid。将父元素设为 display: flex，并配合 align-items: center 和 justify-content: center，再给它一个高度（例如整页加载器使用 100vh）。这样加载器元素就能在水平和垂直方向上完美居中。