⏳

CSS 加载动画生成器

纯 CSS 加载动画生成器，支持多种风格与自定义配置。

⚙️ 设置

预览

CSS 代码

.loader {
  width: 64px;
  height: 64px;
  border: 6px solid #3b82f620; /* Light version of color */
  border-left-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML 代码

<div class="loader"></div>

关于此工具

这是一款简单好用的纯 CSS 加载动画 (Loader) 生成工具。无需任何 JavaScript 库或 SVG，仅通过 CSS 属性即可实现流畅的加载效果。工具内置了旋转圆环 (Spinner)、跳动圆点 (Dots)、脉冲圆圈 (Pulse)、律动条纹 (Bars) 等多种经典风格。您可以自由调节动画的颜色、尺寸、旋转速度及线条粗细。所有生成的代码均为纯 CSS，兼容性好且性能极佳，支持一键复制 HTML 与 CSS 代码，即插即用。

功能特点

  • ⏳ 多种风格：内置 Spinner, Dots, Pulse, Bars, Dual Ring 等多种经典加载动画
  • 🎨 自由定制：支持自定义颜色、尺寸、线条粗细及动画速度
  • ⚡ 纯 CSS：生成的代码完全基于 CSS3 动画，无外部依赖，性能优异
  • 👁️ 实时预览：所见即所得，调整参数即刻看到动画效果
  • 💻 代码生成：同时生成 HTML 结构与 CSS 样式代码，一键复制即可使用

相关推荐

12 个
🎨

CSS 渐变生成器

可视化的 CSS 渐变背景生成器，支持多色渐变、Tailwind 生成与实时预览。
🌘

CSS 阴影生成器

可视化的 CSS 盒子阴影生成器，支持多层阴影、Tailwind 生成与实时预览。
🧊

CSS 玻璃拟态生成器

可视化的 CSS 玻璃拟态生成器，支持模糊度、透明度调整与 Tailwind 代码生成。
🧪

正则表达式测试

支持匹配高亮、捕获组查看与替换预览的在线正则测试工具。
🌐

HTML 预览器

HTML 代码实时编辑与预览工具，支持 JS/CSS 运行。
🎨

CSS 格式化与压缩

支持 CSS 代码的一键美化、普通压缩与完全压缩，提升开发效率与网页性能。
⚙️

JSON 格式化

专业级 JSON 格式化工具，支持美化、压缩、验证、排序、Unicode 转换及转义处理，数据本地处理更安全。
📈

UTM 参数生成器

快速生成带 UTM 的跟踪链接，支持保留原有参数与自定义参数。
🏷️

Meta 标签生成器

SEO Meta 标签、Open Graph 及 Twitter Card 在线生成工具。
✅

JSON 校验器

实时校验 JSON 语法，精准定位错误位置，支持格式化、压缩及结果下载。
🎨

CSS 滤镜生成器

可视化的 CSS 滤镜生成器，支持多种效果组合与 Tailwind 代码生成。
🗄️

SQL 格式化

在线 SQL 格式化与压缩工具，支持多种方言。