使用AI在几秒钟内创建引人注目的SVG加载动画。只需描述你想要的风格——旋转器、脉冲圆点、进度环或骨架屏——我们的生成器就能让它栩栩如生。适合网站、应用和仪表板。
案例
每个案例都由一段提示词生成。选一个作为起点，再修改细节即可。
创建一个 HTML+CSS+SVG 的 "DNA 螺旋"（DNA Helix）加载动画指示器。 在 200×200 SVG viewBox 中，绘制一个旋转的 <g class="nucleotide"> 组，围绕中心点旋转（transform-origin: center，3s linear 无限旋转 360°）。 组内绘制两条交织的"脊线"曲线，使用 SVG <path> 搭配三次贝塞尔控制点，在固定 y 间隔处交叉（如 M 60 20 Q 100 50 140 20 Q 100 80 60 80 …），从顶部模拟螺旋结构。 在 y=20, 50, 80, 110, 140, 170 处放置 6 对水平"碱基对"横档。每对是一条水平线连接两个小圆（两端各在一条脊线上），每对使用不同调色板强调色（品红/黄/薄荷/紫罗兰/天蓝交替）。 横档线使用 stroke-dasharray: 2 3，呈现点描质感，营造科学实验风格。 下方添加小型等宽标签（"SEQUENCING · 0.42"），颜色为暗灰色。 背景：深色，配以微妙的玻璃卡片容器。
创建一个 HTML+CSS+SVG 的 "液态金属"（Liquid Metal）加载动画指示器，使用 SVG 粘稠滤镜。 定义 SVG <filter id="goo">： <feGaussianBlur stdDeviation="10"/> <feColorMatrix>，矩阵值 " 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -10"——这是经典的"粘稠"技法，使重叠的模糊形状融合为单个水银状流体。 <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 在 <g filter="url(#goo)"> 内创建 3-4 个彩色圆，大致位于同一中心点，每个独立动画：3.5s ease-in-out 无限循环 "metalFloat" 关键帧，在不同轨道平移（如 blob A：±35px X，±10px Y；blob B：-1.2s 延迟；blob C：-2.4s 延迟），外加 scale 0.9 → 1.1。 流体球在靠近时呈现融合/分裂/变形如水银的效果——粘稠滤镜承担核心视觉。 中心添加一个较小的实心黄色 <circle class="metal-core">，2s 循环脉动 scale 1 → 1.4。 使用薄荷/黄色强调色。置于深色玻璃卡片容器内。
创建一个 HTML+CSS+SVG 的 "量子点阵"（Quantum Dots）加载动画，4 个彩色圆点在椭圆轨道上换位运动。 SVG viewBox 240×160。内部一个 translated <g> 居中于 (120, 80)，包含 4 个圆，半径各为 9，均位于 cx=0 cy=0（原点），通过独立 CSS 关键帧平移。 4 个圆点沿椭圆四角（rx=72, ry=40）循环运动，相位各不同： 圆点 1（品红）：关键帧 q1——0% (-72,0) → 25% (0,-40) scale(0.6) → 50% (72,0) → 75% (0,40) scale(0.6) → 100% 返回 圆点 2（黄色）：关键帧 q2——相位偏移 25%（从顶部开始） 圆点 3（薄荷）：关键帧 q3——相位偏移 50%（从右侧开始） 圆点 4（紫罗兰）：关键帧 q4——相位偏移 75%（从底部开始） 全部使用 2.4s cubic-bezier(0.65,0,0.35,1) 无限循环。侧面位置 scale(0.6) 使圆点产生"退入后方"的深度感。 背后绘制一条淡色虚线椭圆（stroke-dasharray 2 3，白色 0.1 不透明度），显示轨道路径。 容器：深色玻璃卡片，标签 "Quantum Dots"。
创建一个纯 CSS HTML 的 "折纸折叠"（Origami Fold）加载动画，无需 SVG。 一个 120×120 的 .origami 容器，transform-style: preserve-3d，父元素 perspective: 600px。整个容器动画 6s ease-in-out 无限循环 rotateY 0 → 180 → 360 → 180 → 0，rotateX 在中间点摆动 ±45°。 内部 4 个 .fold div，通过 border-width 技巧创建 CSS 三角形： f1：上三角——border 60px 60px 0 60px，上边框颜色 = 品红 f2：下三角——border 0 60px 60px 60px，下边框颜色 = 黄色 f3：右三角——border 60px 60px 60px 0，右边框颜色 = 紫罗兰 f4：左三角——border 60px 0 60px 60px，左边框颜色 = 薄荷 每个三角形各自 3s ease-in-out 无限循环关键帧，绕 X 或 Y 轴旋转 ±180°（foldA：rotateX 0→180，foldB：rotateX 0→-180，foldC：rotateY 0→-180，foldD：rotateY 0→180）——像纸制算命器般开合折叠。 容器 3D 旋转 + 各三角形独立折叠的组合，营造出复杂的纸艺雕塑变换效果。 每个三角形设置 transform-origin: center。置于深色玻璃卡片中展示。
创建一个 HTML+CSS+SVG 的 "流体波浪瓶"（Fluid Wave Flask）加载动画，彩色波浪在玻璃瓶内晃动。 SVG 240×200 viewBox。使用 <path> 绘制玻璃烧瓶轮廓，细颈宽体（M 90 30 L 90 60 Q 70 75 70 100 L 70 165 Q 70 180 90 180 L 150 180 Q 170 180 170 165 L 170 100 Q 170 75 150 60 L 150 30 Z），白色描边 0.3 不透明度 2px，fill none。 将同一路径用作 <clipPath id="bottleClip">。 在剪切区域内渲染 <g class="level"> 包裹器，缓慢平移 Y -30 到 +20 px（5s ease-in-out 无限循环——水位升降），内含 3 层 <path> "波浪"： 波浪 1：紫罗兰 0.7 不透明度，4s linear 无限循环 translateX 0 → -160px 波浪 2：品红 0.6 不透明度，3s 循环，-1s 延迟 波浪 3：薄荷 0.5 不透明度，2.5s 循环，-0.5s 延迟 每条波浪路径为水平正弦波，使用 QT 链式贝塞尔命令（"M 0 100 Q 20 90 40 100 T 80 100 T 120 100 …"，向右延伸超出右边缘，使向左滑动时无缝循环）。 剪切区域内添加 4 个白色小气泡（1.5-3px 圆），每个 3s ease-in 无限循环 translateY 0 → -80 + opacity 0 → 1 → 0，延迟错开。 效果：液体左右晃动，水位上下呼吸，气泡上升。容器：深色玻璃卡片。
创建一个纯 CSS 的 "故障信号"（Glitch / Signal Unstable）加载动画，无需 SVG。 .glitch-wrap 容器，文字 "LOADING" 使用 Fredoka 700 字重 38px 白色。 文字元素设置 ::before 和 ::after 伪元素，content 均为 'LOADING'，绝对定位叠加： ::before：clip-path polygon(0 0, 100% 0, 100% 45%, 0 45%)——仅显示上半部。颜色：品红。动画：glitchTop 2s steps(2) 无限循环，大部分时间位于 translate(0,0)，在 92-96% 处短暂 2 帧抖动——translate(±1-3px, ±1px)。 ::after：clip-path polygon(0 55%, 100% 55%, 100% 100%, 0 100%)——下半部。颜色：薄荷。动画：glitchBot 2s steps(2) 无限反向循环，相似抖动时序。 营造经典的 RGB 分离扫描线故障效果，文字上下半部短暂偏离中心。 文字下方放置 4px 高的进度条 div，背景 rgba(255,255,255,0.1)，内含 ::before 宽度 40%，linear-gradient（品红、黄、薄荷），动画 left: -40% → 100%，1.6s cubic-bezier(0.4,0,0.2,1) 无限循环——跑马灯条。 添加 .scan-line 绝对定位覆盖层，linear-gradient(transparent 30%, rgba(white,0.08) 50%, transparent 70%)，动画 translateY -100% → 100%，3s——CRT 扫描线漂移。 进度条下方放置小型等宽标签 "SIGNAL UNSTABLE"，暗灰色，字间距 0.3em 大写。 深色玻璃卡片容器。
创建一个 HTML+CSS+SVG+JS 的 "牛顿摆"（Newton's Cradle）加载动画，具有正确的顺序能量传递。 SVG 240×200 viewBox。顶部框架：水平线 y=30 从 x=20 到 x=220，两侧立柱下延至 y=180，底线 y=180（白色 0.2 不透明度）。 5 个摆锤悬挂于横杆，x=64, 92, 120, 148, 176（全部紧挨——28px 圆心距 = 2× 半径 14）。每个摆锤为外层 <g transform="translate(X, 30)">（支点在顶部），内含： - 垂直 <line>（摆线），从 (0, 0) 到 (0, 110) - <circle> 摆球，位于 (0, 110)，半径 14，填充黄色（中间 3 个为薄荷色） 外层 <g> 设定支点。内层 <g class="swing swing-l"> / <g class="swing swing-r"> 围绕 transform-origin: 0 0（即支点）旋转。 关键——SVG 旋转方向：rotate(+θ) 使球向左移动（在 SVG 中 Y 轴向下，正角度为逆时针），rotate(-θ) 使球向右移动（顺时针）。验证：球悬挂在支点下方 local(0,110)，rotate(+50°) → local x ≈ -84（向左）。 使用 JS requestAnimationFrame（而非 CSS 动画）。两个球必须顺序运动： 阶段1（约460ms）：左球从 +50° 下落到 0°，加速。右球静止于 0°。 （左球从支点左侧摆入，向右朝中心摆动——重力将其拉回。） 到达 0° 时：瞬间撞击——左球立即停止，右球向右弹出。 阶段2（约460ms）：右球从 0° 上升到 -50°，减速。左球静止于 0°。 （右球向右远离中心摆动——被向右踢出。） 最高点短暂停顿（约80ms）。 阶段3（约460ms）：右球从 -50° 回落到 0°，加速。左球静止于 0°。 （右球向左朝中心摆动——重力将其拉回。） 到达 0° 时：瞬间撞击——右球停止，左球向左弹出。 阶段4（约460ms）：左球从 0° 上升到 +50°，减速。右球静止于 0°。 （左球向左远离中心摆动——被向左踢出。） 短暂停顿（约80ms），循环。 使用 Math.cos() 计算摆锤位置：angle = maxAngle * cos(t/swingMs * π/2)。这产生自然的正弦缓动——球在最低点最快，在最高点最慢。 中间 3 个球全程完全静止——经典的牛顿摆物理表现。 容器：深色玻璃卡片。
创建一个 HTML+CSS+SVG 的 "日食凌日"（Solar Eclipse）加载动画。 SVG 220×220 viewBox。 中心：发光的黄色"太阳"——叠加圆： - sun-glow：r=50，填充黄色，filter blur(20px)，3s ease-in-out 无限循环 scale 1 → 1.1 + opacity 0.4 → 0.9 - sun-disc：r=40，填充黄色（硬边缘） 两个淡色日冕环围绕太阳（r=62 虚线 和 r=70 stroke-dasharray 2 6），12s linear 循环缓慢旋转 360°。 "月球"圆 r=40，填充与背景同色的深色，1px 黄色描边。使用 5s ease-in-out 无限循环 translate 关键帧沿轨道运行：-140px,0 → 0,0 → 140px,0 → -140px,0（并返回）。月球视觉上凌日而过，在中心经过时短暂形成近乎全食。 周边 8 个方向放置短小黄色射线（rayPulse：3s ease-in-out 无限循环 opacity 0.2 → 0.8），animation-delay 错开 0 至 1.4s——闪烁的射线爆发。 viewBox 内随机位置点缀 6 个白色小星 <circle>，每个 2s 闪烁关键帧（opacity 0.2 → 1），延迟错开。 效果：宁静的天体场景，太阳辉光，月球凌日穿行，星星闪烁。容器：深色玻璃卡片。
创建一个 HTML+CSS+SVG 的 "神经网络脉冲"（Neural Network Pulse）加载动画，脉冲在微型 3 层网络中穿行。 SVG 260×200 viewBox。 定义 3 层 8 个节点： 输入层（3 节点）：(40, 50), (40, 100), (40, 150) 隐藏层（3 节点）：(130, 40), (130, 100), (130, 160) 输出层（2 节点）：(220, 70), (220, 130) 绘制全部 9 条输入→隐藏连接 + 6 条隐藏→输出连接，使用淡色 <path class="neural-link">，白色描边 0.1 不透明度 0.6px。 然后绘制 6 条彩色"脉冲"路径（<path class="neural-pulse">），覆盖网络中的特定路由——每条脉冲为输入→隐藏→输出 3 段路径。每条： stroke-width: 1.6 stroke-dasharray: 8 100（8px 亮色脉冲位于 100px 间隔上） stroke-linecap: round 动画：neuralFire 2s linear 无限循环，stroke-dashoffset 200 → 0，使脉冲从路径起点运行至终点 opacity 0 → 1 → 1 → 0，在端点淡入淡出 6 条脉冲路径 animation-delay 错开：0, 0.3s, 0.6s, 0.9s, 1.2s, 1.5s——脉冲持续在不同路由上发射。 每条脉冲不同颜色（品红/薄荷/黄/紫罗兰/天蓝/琥珀）。 每个节点圆设置 "nodeFlash" 关键帧（2s ease-in-out 无限循环）：50% scale(1.6) 填充薄荷色 + drop-shadow(0 0 6px mint)——节点在脉冲到达时"激发"。使用相同的错开延迟，使节点与脉冲同步亮起。 容器：深色玻璃卡片。标签："Neural Pulse"。
使用方法
三步完成，无需绘画、关键帧或编程。
第 1 步：描述你的加载动画——风格、颜色和速度
第 2 步：AI 即时生成流畅循环的 SVG 动画
第 3 步：预览、自定义并导出为 SVG、GIF 或 MP4
应用场景
适合在 SaaS 产品、数据面板、移动应用和账号系统中使用加载动画，向用户清楚说明数据正在同步、筛选正在更新或请求正在处理中，从而降低等待时的不确定感。
适合设计系统、组件库和前端团队统一制作 loader 风格、骨架屏状态、空态和异步反馈动画，便于在多个产品中建立统一的视觉规范。
适合教程视频、产品发布演示、新手引导和 UI 讲解内容，让等待状态不再只是静态占位，而是真正可展示的动效片段。
适合设计工作室和自由职业者快速为客户生成多套加载动画方案，匹配品牌色、产品气质和业务场景，而不必手写每一种状态。
核心优势
支持生成经典旋转器、环形进度和轨道式 loader，并可自定义循环节奏与主题配色。
支持弹跳圆点、脉冲指示器和心跳式等待状态，适合轻量现代界面。
可以生成卡片、表格、信息流和面板的骨架屏占位动画。
可按品牌色、圆角、描边粗细和运动气质统一 loader 风格，而不是只能用通用默认样式。
可调节速度、延迟、缓动和重复节奏，让加载动效更偏克制、活泼、高级或科技感。
支持导出 SVG 直接嵌入网页，也可转成 GIF 或 MP4 用于演示、文档和社交素材。
基础知识
加载动画是告诉用户后台正在发生某些操作的视觉指示器。它们出现在内容获取、文件上传或进程运行时——在操作和结果之间搭建桥梁。
常见类型包括旋转器、进度条、骨架屏和脉冲圆点。精心设计的加载动画能减少用户的等待感知时间，让用户保持参与而非沮丧。
基于SVG的加载动画体积小、可缩放，在任何屏幕上都能清晰渲染。与GIF加载器不同，它们可以用CSS设置样式、响应主题变化，并且几乎瞬间加载。
常见问题
开始之前，大家最常问的问题。
可以！只需描述你想要的加载动画风格，我们的AI就会为你生成独特的SVG旋转器、进度条或骨架屏加载器。
你可以将SVG加载动画导出为原始SVG代码、动画GIF或MP4视频。SVG格式非常适合网页使用，因为它体积小且可缩放。
可以。你可以指定品牌色、渐变、描边粗细、圆角风格和整体气质，让加载动画贴合现有设计系统或界面主题。
很多情况下是的。SVG 加载动画通常更轻、在高分辨率屏幕上更清晰，而且比 GIF 更容易做样式调整和后续维护。