什么是 CSS 加载器/旋转器生成器？
CSS 加载器/旋转器生成器是一个可视化工具，帮助您使用纯 CSS 创建精美的加载动画。无需从头编写复杂的关键帧动画，只需浏览我们的43 个精心设计的预设集合，根据您的设计进行自定义，然后复制代码即可。
为什么使用 CSS 加载器？
加载指示器对用户体验至关重要。它们在数据获取、页面转换或任何异步操作期间提供视觉反馈。基于 CSS 的加载器具有多个优势：
轻量级
无需 JavaScript 或图像文件——纯 CSS 动画可将您的包体积保持在最小。
可自定义
轻松更改颜色、大小和速度，完美匹配您的品牌标识。
高性能
硬件加速的 CSS 动画在所有设备上流畅运行，不会影响性能。
易于访问
在所有现代浏览器中工作，具有一致的渲染效果，无兼容性问题。
加载器类别
我们的集合分为 7 个类别，帮助您为项目找到完美的加载器：
Spinner
Dots
Bars
Pulse
Progress
Shapes
使用方法
浏览并选择加载器
使用类别标签页（全部、Spinner、Dots、Bars、Pulse、Progress、Shapes）按类型筛选加载器。每个缩略图都显示实时动画预览。点击任何加载器即可选择它。
自定义您的加载器
选择加载器后，使用右侧的控件进行自定义：
- 颜色——点击颜色选择器为加载器选择任何颜色
- 大小——拖动滑块或输入 20px 到 120px 之间的值
- 速度——将动画持续时间从 0.3s（快速）调整到 3.0s（缓慢）
所有更改都会在实时预览中立即反映。
在不同背景上预览
在浅色、深色和透明背景之间切换，查看加载器在不同环境中的外观。这有助于确保您的加载器在任何页面背景下都可见。
复制代码
代码输出部分提供两个标签页：
- HTML——加载器的标记结构
- CSS——包含您自定义值的完整样式（颜色、大小、速度已解析）
点击复制按钮将活动标签页的代码复制到剪贴板。将 HTML 粘贴到您的页面中，并将 CSS 添加到您的样式表中。
功能
43 个精选加载器预设
我们集合中的每个加载器都经过精心设计，具有视觉吸引力和生产就绪性。从简单的旋转环到复杂的 3D 立方体动画，每种用例都有相应的加载器。
所有加载器都使用纯 CSS，无 JavaScript 依赖。
实时自定义
使用直观的控件微调加载器的每个方面。颜色、大小和速度的更改会立即应用到实时预览中。
无需重新生成或刷新——立即看到您的更改。
背景预览切换
在浅色、深色和透明背景上预览加载器，确保它在任何环境中都能正常工作。
透明棋盘图案帮助您验证加载器没有意外的背景伪影。
生产就绪的代码输出
生成的 CSS 包含已解析的值而不是变量。这意味着您获得精确的像素大小、特定颜色和精确的时序值。
可直接粘贴到您的项目中，无需任何额外设置。
常见问题
加载器需要 JavaScript 吗？
不需要。所有加载器都使用纯 CSS 动画和关键帧构建。您只需要 HTML 标记和 CSS 样式——动画工作无需 JavaScript。
复制代码后可以更改加载器颜色吗？
可以。生成的 CSS 使用显式颜色值（例如 #6366f1）。只需在 CSS 中查找并替换颜色值即可更改它。
var(--loader-color)。加载器是响应式的吗？
加载器使用基于您设置的大小值的相对大小。您可以在生成器中调整大小或修改 CSS 中的像素值以适应您的布局。使用 CSS 自定义属性可以轻松创建响应式加载器。
哪些浏览器支持这些加载器？
所有加载器都适用于现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。它们使用标准 CSS 功能，如 @keyframes、border-radius 和 transform，这些功能得到广泛支持。
可以在商业项目中使用这些加载器吗？
可以。生成的 CSS 代码可自由用于任何项目，包括商业项目。无需署名。
如何在页面加载期间显示加载器？
将加载器 HTML 添加到您的页面并默认显示它。当您的内容加载完成时，使用 JavaScript 隐藏或移除加载器元素。
一个常见的方法是添加一个 CSS 类，使加载器通过过渡淡出：
// Hide loader when page loads
window.addEventListener('load', function() {
document.querySelector('.loader').classList.add('fade-out');
});
还没有评论，快来发表第一条！