SVG 加载动画生成器
指导
SVG 加载动画生成器
在浏览器中直接构建清晰、动画化的SVG加载器，并复制可直接使用的代码片段用于您的项目。从七种流行的旋转器样式中选择，调整大小、笔画、颜色和动画速度，然后立即查看实时预览。导出为自包含的内联SVG、纯HTML + CSS片段或React JSX组件。
如何使用
- 选择一个 旋转器类型 — 圆形笔画、双环、点状环、脉冲点、弹跳点、条形加载器或涟漪。
- 调整 大小, 笔画宽度, 主色，并且 轨道/次色 以匹配您的品牌。
- 设置 动画速度 （以秒为单位）以控制加载器的循环速度。
- 选择一个 输出格式：内联SVG（一个文件，可随处使用）、HTML + CSS（单独的样式块）或React组件（JSX）。
- 从输出面板复制生成的代码，或将其下载为文件。
特征
- 七种旋转器样式 — 圆形笔画、双环、点状环、脉冲点、弹跳点、条形加载器、涟漪。
- 实时动画预览 在棋盘背景上显示，以便您能一眼判断任何颜色选择。
- 自包含内联SVG — 动画CSS嵌入在SVG内部，因此无需外部样式表即可工作。
- HTML + CSS 当您更喜欢将标记和样式分开时，导出带有单独样式块的版本。
- React组件（JSX） 导出可直接粘贴到Next.js、Vite或Create React App项目中的代码。
- 可自定义的大小、笔画、颜色和速度 带有合理的默认值和验证。
- 内置可访问性 — 每个旋转器都配备
role="status"和一个可配置的aria-label以便屏幕阅读器宣布加载状态。 - 作用域类名 每个片段都有，因此同一页面上的多个旋转器不会发生冲突。
何时使用每种旋转器
- 圆形笔画 / 双环 — 用于无法确定进度的等待情况（API调用、页面切换）。
- 点状环 — 经典的“思考”指示器，与微妙的UI搭配效果良好。
- 脉冲点 / 弹跳点 — 适用于聊天“输入”等友好、对话式的场景。
- 条形加载器 — 用于文件上传、下载，或任何需要宽大、低轮廓指示器的地方。
- 瑞波币 — 用于内容出现前的柔和、环境反馈时刻。
常问问题
-
为何使用SVG制作加载器而不是动画GIF？
SVG是矢量格式，因此旋转器在任何尺寸和任何像素密度下都保持清晰。文件大小非常小（通常只有几百字节），颜色可通过CSS在运行时更改，动画可以暂停、恢复或重新样式化，而无需重新编码资产。相比之下，GIF是位图格式，文件更大，边缘有失真，且颜色和速度被固定在导出时的设置中。
-
确定性加载指示器和非确定性加载指示器之间的区别是什么？
确定性指示器显示向已知总量的实时进度，例如从0%到100%的进度条。非确定性指示器仅告知用户工作正在进行，而无法测量持续时间或进度——例如等待网络响应。大多数旋转器（旋转圆圈、脉冲点、涟漪）是非确定性的；条形加载器可以是确定性或非确定性，取决于其显示的是移动的切片还是填充比例。
-
何时应该显示加载器？
作为一般可用性指南，对于在100毫秒内完成的操作，不要显示任何指示器——UI会感觉是瞬时的。在大约100毫秒到1秒之间，一个靠近受影响控件的小型内联指示器就足够了。超过1秒，使用清晰的加载器。对于超过大约10秒的等待，应切换到带有有意义信息的确定性进度指示器，因为用户会开始失去对系统仍在运行的信心。
-
SVG内部的CSS动画是如何工作的？
CSS动画以与HTML元素相同的方式作用于SVG元素：您编写一个关键帧规则并将其应用到类的animation属性上。常见的目标包括用于旋转的transform属性、用于淡出的opacity属性，以及用于圆形和线条绘制效果的stroke-dashoffset属性。为了使旋转在形状的视觉中心点上进行，将transform-origin设置为该点。在SVG内部声明的样式规则将被限制在该文档内，这就是为什么自包含的SVG可以在任何页面中直接使用。
-
如何让加载器对屏幕阅读器可访问？
使用role=status（或role=progressbar用于确定性进度）标记加载器元素，以便辅助技术将其视为一个动态区域。提供一个简短且有意义的aria-label，例如“加载”或“保存”，以便明确其用途，并避免仅依赖颜色来传达状态。对于确定性进度，还应设置aria-valuenow、aria-valuemin和aria-valuemax，以便在进度更新时宣布百分比。
