CSS 加载动画 —— 40+ 个纯 CSS spinner/骨架屏，可调颜色、大小、速度，复制代码就能用。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
<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. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 加载动画生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。