LocalTools离线浏览器工具合集

分类: 开发工具

CSS 加载动画生成器

站方自主规划没找到想要的工具？

在本地设计轻量的 CSS 加载指示器并复制代码

带实时预览地创建纯 CSS 加载动画。调整尺寸、颜色、线条粗细和速度，然后复制 HTML 和 CSS 代码片段。不需要 JavaScript，也不需要图片。

预览

HTML
<span class="loader" role="status" aria-label="加载中…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

每段代码只对 transform 和 opacity 做动画，并以 prefers-reduced-motion 区块收尾，让已在系统里要求减少动态效果的人不必看着它转。

不用 JavaScript、不用图片、不用网络字体，也没有任何内容离开你的浏览器。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

加载指示器是少数几个几行 CSS 就能完胜一个库的场合：没有脚本要加载，没有图片要请求，也没有什么需要在你真正等待的东西之前先初始化。这里的五个模板——圆环、双环、圆点、竖条和脉冲——只对 `transform` 和 `opacity` 做动画，因此浏览器可以把它们交给合成器处理，而不必逐帧重新计算布局。每段代码都以 `prefers-reduced-motion` 区块收尾，因为加载动画属于装饰，而已经在系统里要求停止动效的人，没有理由被迫看着它转。标记是带标签的 `<span role="status">`，这样屏幕阅读器会朗读出“正在等待”，而不是碰到一个空盒子。

使用方法

  1. 挑选一个模板，然后设置尺寸、粗细、速度和颜色。
  2. 如果类名可能与你的样式表冲突，就改掉它。
  3. 把 HTML 和 CSS 复制到你的项目里。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

这些加载动画是纯 CSS 的吗？
是的。每一个都是一个 span（圆点和竖条模板会多几个空的子 span）加上一段 CSS 动画。没有 JavaScript，没有 SVG，没有图片，也没有网络字体。
运行它们需要 JavaScript 吗？
不需要。元素一进入文档，动画就开始了。你只需要用代码决定什么时候显示、什么时候隐藏。
可以改速度和颜色吗？
可以——尺寸、线条粗细、动画时长、主色和轨道色都是本页的控件，而且会直接写进你复制的那段代码里。
对偏好减少动态效果的访客怎么办？
每段生成的代码都以 prefers-reduced-motion 媒体查询收尾，实际上会让动画停下来，所以指示器依然出现，但对在系统层面调低了动效的人不会旋转。
代码是在本地生成的吗？
是的。设置、预览和生成的代码片段都留在你的浏览器里，不会上传任何内容。

返回全部工具