CSS加载器生成器 - Spinner和加载动画在线

使用实时预览和自定义功能创建纯CSS加载动画

预览

代码

<style>
.loader {
  width: 48px;
  height: 48px;
  border: calc(48px / 8) solid #93c5fd;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spinnerBorder-spin 1s linear infinite;
}

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

<div class="loader"></div>

常见问题

什么是CSS加载器生成器？

CSS加载器生成器是一款在线工具，帮助开发者无需从零编写CSS关键帧动画，即可创建纯CSS加载动画（旋转器、进度指示器、圆点、条形、脉冲等）。加载指示器是必不可少的UI组件，在内容获取、处理或加载时提供视觉反馈。该工具提供了一个预构建的加载器设计画廊，可以自定义颜色、大小和动画速度，然后导出为干净、可复制粘贴的HTML和CSS代码，直接用于生产环境。

如何使用这个CSS加载器生成器？

1. 浏览加载器画廊，点击适合您设计的加载器样式（旋转器、圆点、条形、脉冲、环形或其他样式）。2. 使用分类选项卡按类型筛选加载器。3. 使用颜色选择器自定义主色调。4. 调整大小滑块（16-96px）和速度滑块（0.3-3.0秒）。5. 在亮色和暗色之间切换预览背景。6. 选择输出格式（HTML、CSS或合并），然后点击复制。

我的数据安全吗？是否有数据发送到服务器？

是的，您的数据完全安全。此工具完全在您的浏览器中运行，使用客户端JavaScript和CSS。没有任何配置、颜色值或代码输出会发送到任何服务器。加载器动画使用纯CSS直接在您的浏览器中渲染。该工具加载后可离线使用。

为什么使用纯CSS加载器而不是GIF、SVG或JavaScript动画？

纯CSS加载器具有多项优势：(1) 性能 — CSS动画由GPU硬件加速，产生更流畅的60fps动画。(2) 可扩展性 — CSS加载器在任何尺寸下都能完美缩放，不会出现像素化。(3) 文件大小 — CSS加载器与GIF文件（每个10-50KB）相比几乎不增加字节。(4) 可定制性 — 颜色、大小和速度可以通过CSS属性即时更改。(5) 无依赖 — 不需要JavaScript库或图像文件。(6) 无障碍性 — CSS动画响应prefers-reduced-motion媒体查询。

CSS加载动画在技术上是如何工作的？

CSS加载动画结合了多种CSS特性：@keyframes规则定义动画序列（如旋转、缩放、透明度过渡）。animation简写属性应用具有持续时间、时间函数和迭代次数的关键帧。伪元素（::before、::after）允许从单个HTML元素创建多部分动画。CSS transform属性（rotate、scale、translate）通过GPU合成高效处理视觉变化。animation-delay在多个元素之间创建交错效果。

复制后可以自定义生成的加载器CSS吗？

是的，生成的CSS是标准的、格式良好的代码，您可以自由修改。如果使用CSS变量输出模式，只需更新:root自定义属性值即可更改颜色、大小和速度 — 这对于主题化特别有用。您还可以重命名.loader类、调整animation-timing-function或修改关键帧百分比。

如何使CSS加载器具有无障碍性？

使CSS加载器具有无障碍性的方法：(1) 在加载器元素上添加role="status"和aria-label="Loading"。(2) 在加载器内部包含视觉隐藏的文本，如<span class="sr-only">Loading...</span>。(3) 通过添加@media (prefers-reduced-motion: reduce) { .loader { animation: none; } }来尊重prefers-reduced-motion。(4) 确保加载器与背景之间有足够的颜色对比度。

代码示例

// CSS Loader Generator - JavaScript Implementation

const LOADERS = {
  spinnerBorder: {
    name: 'Border Spinner',
    category: 'spinner',
    html: '<div class="loader"></div>',
    css: (color, size, speed) => `
.loader {
  width: ${size}px;
  height: ${size}px;
  border: ${Math.round(size / 8)}px solid #f3f3f3;
  border-top: ${Math.round(size / 8)}px solid ${color};
  border-radius: 50%;
  animation: loader-spin ${speed}s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}`,
  },
  bouncingDots: {
    name: 'Bouncing Dots',
    category: 'dots',
    html: '<div class="loader"><span></span><span></span><span></span></div>',
    css: (color, size, speed) => `
.loader {
  display: flex;
  gap: ${Math.round(size / 6)}px;
  align-items: center;
}

.loader span {
  width: ${Math.round(size / 4)}px;
  height: ${Math.round(size / 4)}px;
  background-color: ${color};
  border-radius: 50%;
  animation: loader-bounce ${speed}s ease-in-out infinite;
}

.loader span:nth-child(2) {
  animation-delay: ${(-speed / 3).toFixed(2)}s;
}

.loader span:nth-child(3) {
  animation-delay: ${(-speed / 6).toFixed(2)}s;
}

@keyframes loader-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}`,
  },
};

function generateLoader(loaderId, options = {}) {
  const { color = '#3b82f6', size = 48, speed = 1.0 } = options;
  const loader = LOADERS[loaderId];
  if (!loader) throw new Error(`Unknown loader: ${loaderId}`);
  return {
    html: loader.html,
    css: loader.css(color, size, speed).trim(),
  };
}

// Usage
const result = generateLoader('spinnerBorder', {
  color: '#ef4444', size: 64, speed: 0.8
});
console.log('HTML:', result.html);
console.log('CSS:', result.css);

CSS加载器生成器 - Spinner和加载动画 在线