CSS加载动画生成器
创建自定义CSS加载动画。
大小40px
速度1.0s
快慢
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}纯CSS加载动画生成器
加载动画（loader或spinner）是任何现代Web应用中的关键视觉元素。它们在等待期间向用户指示系统正在处理请求，通过提供视觉反馈来改善用户体验。纯CSS加载动画特别有优势，因为不需要JavaScript、图片或外部库，使其极其轻量且加载迅速。
我们的生成器包含八种不同类型的加载动画：经典旋转器、弹跳点、均衡器条、脉冲扩展、双弹跳、旋转环、3D方块和同心波。每种都可以自定义颜色（任何十六进制值）、大小（16到80像素）和动画速度（每个周期0.3到3秒）。
生成的代码是使用@keyframes动画的纯CSS，无外部依赖。你可以分别或一起复制HTML和CSS，直接粘贴到项目中。加载动画完全响应式，在任何设备和屏幕分辨率上都显示良好。
常见问题
加载动画使用JavaScript吗？
不使用，所有加载动画都是100%纯CSS，使用@keyframes动画。不需要JavaScript，这使它们非常高效且易于在任何Web项目中实现。
所有浏览器都兼容吗？
是的，CSS @keyframes动画和使用的属性兼容所有现代浏览器，包括Chrome、Firefox、Safari、Edge和Opera。当前浏览器不需要厂商前缀。
可以在同一页面使用多个加载动画吗？
可以，但要确保为每个不同实例重命名“.loader”类（例如“.spinner-1”、“.spinner-2”），以避免不同类型的加载动画之间样式冲突。