CSS 加载动画(Loader / Spinner)生成器

选择加载动画样式(圆环、圆点、条形、脉冲),自定义颜色、大小和速度,然后复制生成的 HTML 和 CSS 代码。不使用任何图片,纯 CSS 实现,并在您的浏览器中生成和预览。

加载器样式

颜色

大小:48px

速度:1s

HTML + CSS 代码

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

工作原理

纯 CSS 实现的动画加载器比 GIF 轻得多,还能自动适配界面的颜色和主题。这里提供的每种样式都基于不同的 CSS 动画(@keyframes):圆环采用持续旋转,圆点和条形通过多个元素之间的时间错位实现,脉冲则通过缩放和透明度的变化实现。

生成的代码不依赖 JavaScript 吗?

是的,动画完全由 CSS 通过 @keyframes 驱动:只需把 <style> 代码块和对应的 HTML 复制到您的页面中,无需任何脚本即可让加载器转动。

如何只在加载期间显示加载器?

在请求或处理进行时,使用您惯用的 JavaScript 框架动态添加或移除加载器的 HTML 代码块(或切换 display: none 样式类),内容准备好后再将其隐藏。

代码根据您的设置在浏览器中即时生成,无需连接任何服务器。