创建旋转器、圆点或条形加载动画,可自定义尺寸、速度并导出 CSS。
生成具有可自定义形状、计时和颜色方案的 CSS 加载指示器,以在 Web 界面中提供轻量级状态反馈。
它生成可直接复制到组件中的纯 CSS 加载器动画。
它帮助团队创建一致的加载状态,无需额外的图像资源或依赖项。
它支持使用旋转器、脉冲和条形样式快速试验不同的加载指示器。
旋转器预设
大小:32px,边框:3px,速度:0.9s
点预设
三点弹跳,间隙:6px,持续时间:1.1s
颜色配置
primary:#2563EB,静音:#CBD5E1
加载器 CSS
.loader { animation: spin 0.9s linear infinite; }关键帧
@keyframes spin { to { transform: rotate(360deg); } }无障碍说明
将加载器与面向辅助技术的描述性状态文本搭配使用。
加载器动画让人分心
降低速度并简化运动模式。
加载器颜色对比度较差
在背景表面上使用符合对比度的颜色。
请求失败时出现无限加载器
在异步流中添加超时/错误状态转换。
加载器导致布局移位
在渲染之前为加载指示器保留固定空间。
CSS 加载动画生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
加载程序是否应该始终无限旋转?
仅在实际工作正在进行时;立即切换到成功或错误状态。
如何减少敏感用户的运动?
提供减少运动变体并尊重首选减少运动。
对于加载程序来说,SVG 比 CSS 更好吗?
两者都有效; CSS 对于轻量级应用内指示器很方便。
加载程序需要文本标签吗?
是的,状态文本提高了清晰度和可访问性。