CSS 加载动画生成器

从多种 CSS 加载动画中选择并获取代码。自定义颜色、大小和速度，包含旋转、点阵、进度条等样式。

加载器类型

颜色

大小: 40px

20px80px

速度: 1.0s

0.5s3.0s

预览

HTML

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

CSS

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

分享此工具

📖

使用方法

Step 1

选择加载器

选择加载器

选择您喜欢的加载器样式

→

Step 2

自定义

自定义

调整颜色和大小

→

Step 3

复制

复制 HTML/CSS 代码

✨

功能特点

丰富样式

旋转、点阵、进度条等多种样式

自定义

调整颜色、大小和速度

复制即用

直接复制 HTML+CSS 代码使用

❓

FAQ

旋转、点阵、进度条、环形、脉冲等多种样式。

🔗相关工具

颜色代码转换器

在 HEX、RGB 和 HSL 颜色代码之间转换。使用取色器和实时预览直观选择颜色。

取色器

使用色轮和滑块直观选择颜色。获取并复制 HEX、RGB 和 HSL 格式的颜色代码。

图片颜色提取器

自动检测图片中的主色调并生成色板。还可以点击图片任意位置提取单个颜色。

图片平均色提取器

计算整张图片或选定区域的平均颜色。适用于配色方案选择或缩略图背景色。

CSS 渐变生成器

通过拖拽控制可视化创建 CSS 渐变。支持线性、径向和锥形渐变类型，带预设。

CSS 阴影生成器

通过滑块可视化创建 CSS box-shadow。支持多重阴影和内阴影。