CSS 加载动画生成器

10 种纯 CSS 加载动画,调大小/颜色/速度并复制代码

工具面板

本地处理
正在加载工具...
关于CSS 加载动画生成器

十种纯 CSS 加载动画,尺寸、颜色、速度都可调。预览用的就是下面输出框里那份 CSS,所见即所得。

  • 1

    十种纯 CSS 加载动画(spinner / dots / pulse / bars / grid / orbit / flip / ripple / wave / progress),每种输出「一段 `@keyframes` + 一个类规则」,不带 SVG、GIF 或 JS 依赖。

  • 2

    关键帧名带 `bz-` 前缀(如 `bz-spin`):直接贴进已有项目也不会和你的动画撞名;尺寸、颜色、速度三个参数改完即时反映到代码里。

  • 3

    预览用的是**同一份 CSS**(不是另画的示意图),所以预览什么样、贴出去就是什么样;轨道的半透明色由主色自动生成,换颜色时对比度不用手调。

相关工具

查看全部
设计工具

颜色选择器

选择并提取 HEX、RGB、HSL 颜色值

设计工具
设计工具

颜色对比度

检查前背景色对比是否符合的可访问性标准

设计工具
设计工具

渐变色生成器

可视化创建漂亮的 CSS 线性或径向渐变

设计工具
设计工具

CSS 阴影生成器

可视化调节并复制 box-shadow 代码

设计工具

单位换算

各领域物理单位的精准换算

设计工具
设计工具

字节转换

在 B, KB, MB, GB, TB 间进行转换

设计工具
设计工具

CSS 圆角生成器

可视化调节四角圆角并复制 border-radius 代码

设计工具

CSS 裁剪路径生成器

拖动顶点调整形状,复制 clip-path: polygon() 代码