跳到主要内容

在线 CSS 加载动画生成器：40+ 款纯 CSS spinner / 骨架屏 / 进度条

CSS 加载动画：40+ 个纯 CSS spinner/骨架屏，可调颜色、大小、速度，复制代码就能用。

  • 本地处理
  • 分类 颜色设计
  • 适合 把视觉想法转成可复用的颜色值。
背景
经典转圈
spinner
颜色
大小 (px)
速度 (s)
<div class="l-classic-spinner"></div>
.l-classic-spinner {
  width: 48px;
  height: 48px;
  border: calc(48px / 8) solid rgba(0,0,0,0.1);
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: l-classic-spinner-spin 1s linear infinite;
}
@keyframes l-classic-spinner-spin { to { transform: rotate(360deg); } }

点左侧任意一款，调颜色大小速度，一键复制代码。

这个工具能做什么

40+ 款产品级 CSS 加载动画一站式拿走，spinner、骨架屏、进度条、 跳动小点全都有，按你的项目调好颜色、大小（像素）、速度（秒）， 点一下复制 HTML 和 CSS。八大类覆盖所有常见场景：经典 spinner （border-top、双环、conic 渐变环、虚线、点线）、点状（弹跳、 闪烁、九宫格、点环、拉伸、打字中…）、条形（音频条、阶梯、 滑动条、均衡器、垂直流动）、脉冲（圆、波纹、双圈、心跳、 呼吸方块）、骨架屏（线条、头像卡片、图片块、表格行、段落）、 装饰环（细环、粗环、彩色环、嵌套双环、虚线环）、进度条 （不确定进度、条纹、分段、圆形 conic、加载波）、波浪（点波、 条波、正弦、方块、水平涟漪、弹跳球）。全部都是纯 CSS 动画， 不用 JS、不用 SVG 库、不用 GIF，React、Vue、Svelte、原生 HTML、SSR 项目、MDX 文章都可以直接粘进去用，不需要任何依赖。 支持亮色 / 暗色背景一键切换，发布前可以确认对比度。输出代码用 的是带作用域的 class 名（比如 l-classic-spinner），同一个页面 粘两个 loader 不会动画名冲突。这个工具页本身往你的项目里塞 0 字节 JS，你只拿走你复制走的那段代码。给程序员、设计师、独立 开发者写按钮 loading、做原型图、10 秒内塞个好看 spinner 用。

工具细节

输入
文本 + 数值 + 结构化内容
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
免账号使用
打开页面即可使用；刷新后是否保留结果取决于具体工具。
性能预算
首屏 JS ≤ 25 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
颜色设计 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

CSS 加载动画生成器 适合怎么用

适合在真实界面工作中选色、查色、转色值或整理配色。

适合颜色任务

  • 把视觉想法转成可复用的颜色值。
  • 界面上线前检查对比度和可访问性。
  • 让品牌、设计和前端实现的颜色决策对齐。

颜色检查项

  • 对比度要按真实背景检查,不要只看色块。
  • 有深浅主题时,两套都要单独看。
  • 复制设计系统或代码库真正需要的格式。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 CSS Keyframes 动画生成器 可视化编排 @keyframes:增删关键帧、设 transform/opacity/颜色、实时预览、一键复制可上线 CSS,浏览器本地 打开
  2. 2 CSS 渐变生成器 可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。 打开
  3. 3 CSS clip-path 生成器 可视化 CSS clip-path 生成器：polygon / circle / ellipse / inset，可拖拽控点。 打开

真实使用场景

  • 给提交按钮塞个 spinner，又不想让包变大

    注册表单的提交按钮，请求在飞的时候想转个小圈。挑经典 spinner 调到 20px，颜色设成按钮文字色，速度 0.9 秒，把那 24 行 CSS 粘进组件就行。不用 npm install、不用 SVG、不用为一个 spinner 引一个 12KB 的图标库。React、Astro island、原生 HTML 原型里 渲染出来都一模一样。

  • 给 1 到 2 秒才加载完的信息流做内容形状骨架屏

    个人主页信息流在 4G 下大概要 1.5 秒，光转圈会让人觉得比实际 更慢。挑头像加三行的卡片骨架，shimmer 颜色配你的浅灰底色， 照着首屏可见区重复五份。用户一上来就看见版面雏形，真实加载 时间没变，但感知等待明显短了。

  • 往 MDX 或静态博客文章里塞一个加载态

    你在写一篇讲异步模式的教程，想内联一个会动的 loader，但 MDX 流程里没有客户端 JS。因为这里每款都是纯 CSS，把 HTML 加一段 带作用域的 style 直接贴进文章就动起来了。不用 hydration、不用 运行时，文章的 SSR 版或 RSS 缓存版也不会因此构建失败。

  • 设计评审前做三个加载变体对比

    评审前想给团队并排摆 spinner、脉冲、骨架屏三种，统一品牌色让 大家挑一个。三个都生成成 48px 粘进一个 HTML 文件，切到暗色 底确认对比度。因为 class 名按 loader 分别加了作用域，三个动画 摆在同一页面零冲突。

常见踩坑

  • 大尺寸 loader 转太快。64px 的环配 0.6 秒看着手忙脚乱，超过 48px 就放慢到 1.4 到 2 秒，读起来才稳。

  • 给不到 300ms 或不确定的等待用骨架屏。300ms 以内骨架屏只会闪；像「正在发邮件」这种模糊后台任务该用 spinner。

  • 同一款 loader 粘两份没改名。共用的 keyframes 名会撞，把其中一份作用域类名（比如 l-classic-spinner 改成 l-classic-spinner-big）连同 keyframes 一起改掉。

隐私说明

全部在你浏览器里跑。loader 库、你调的颜色 / 大小 / 速度、生成的 HTML 和 CSS 都不离开这个页面，不发任何服务器。你的选择不会写进 URL、也不会存到远端，内部项目或还没发布的东西都能放心用，不会 外泄。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-07-02