加载动画是前端里最容易被随手打发的一块——随手 npm 装一个 spinner，转起来就算完事。但它其实是页面上唯一一个在「什么都还没有」的时候还在跟用户说话的元素。转得对不对，直接决定了对方是继续等，还是以为页面挂了。
下面这 12 款是童哲网上架的加载与进度类前端效果。我按接入成本分了三组：第一组是成套合集，一次拿到十几二十种，适合当项目里的动效库；第二组是纯 CSS 单品，复制粘贴就能用，不引任何东西；第三组要引 GSAP、React、p5.js 或者依赖 WebGL，视觉上更强，但得先看你的项目栈答不答应。
每款都写了它适合放在哪儿，以及什么时候不该用它。
第一组 · 成套合集，一次配齐（01 - 02）
01. 24 种 Loading 合集 —— 带全局控制面板的那种
CSS + SVG 24 种 零第三方库
旋转圆环、弹跳圆点、进度条、波纹、沙漏、骨架屏、3D 翻转、轨道环绕，24 种铺开，日常开发遇到的等待反馈场景基本都能在里面找到对应的。技术上是 CSS Keyframes + SVG 加少量原生 JS，不引任何第三方库。
有两处做得比一般合集用心。一是全局控制面板，尺寸、速度、主题色、深浅模式统一可调，选型时不用一个个改代码试；二是它会自动识别系统的「减少动效」偏好设置——这条在动效类素材里相当少见，多数作者根本不管，但对前庭功能敏感的用户来说，满屏转圈是会引起不适的。
24 种主流形态，含骨架屏与进度条，不只是转圈
全局面板统一调尺寸、速度、主题色与深浅模式
响应 prefers-reduced-motion，对动效敏感用户友好
每个动画结构独立、类名语义清晰，可单独取用
注意别整包丢进项目。那个控制面板是给你选型用的演示外壳，上线时应该只把选中的那一两个动画的 HTML 和 CSS 摘出来。24 种全留着，既白白多出一堆 CSS，将来别人接手也不知道哪个才是在用的。
02. 12 款终端风加载动画 —— 放一起像一块监控面板
CSS + 原生 JS 12 款 黑底单色
灵感全部取自仪器和命令行：扫描线、二进制数据流、像素格逐格填充、音频波形、打字机文字、进度条、示波器、雷达扫描、信号强度格、脉冲光圈、加密字符跳变、终端命令回显。黑底单色配色统一，十二款并排像一块正在跑的监控面板——这也是它的独特之处，前一款是「什么都有」，这一款是「统一到底」。
每款结构独立、体积极小，纯代码绘制不依赖图片，复制对应片段就能单独取用；颜色、尺寸、节奏改样式即可，响应式栅格在手机上也能正常排布。
它的限制就写在优点里：黑底单色是它的灵魂，换到浅色主题下这套视觉语言基本不成立，得整体重调配色。适合的是开发者工具、后台系统、科技感官网、暗色主题项目；给一个走清爽浅色调的消费类产品用，会显得很出戏。
第二组 · 纯 CSS 单品，粘进去就能用（03 - 07）
03. 自动对比度进度条 —— 进度和文字同步走
纯 CSS 进度条 自动对比度
进度填充推进的同时，覆盖在上面的百分比文字会跟着切换配色，保证不管填充到哪里文字都读得清。这个细节看着小，实际是进度条最常见的翻车点——文字写死成白色，进度条走到浅色区就糊了；写死成深色，走到深色区又看不见。这一款用纯 CSS 解决了它。
整体走极简风，不带任何装饰，适配性强，网页加载、数据提交、资源缓冲都能放。
要说清楚的一点是：纯 CSS 的进度条，进度是动画演的，不是真的。 它按固定时长从 0 走到 100%，跟你的接口返回没关系。要让它反映真实进度（比如文件上传的百分比），得自己用 JS 去改宽度或者 CSS 变量。把它当加载氛围用没问题，当上传进度条用之前一定要接上真实数据，否则会出现「进度条已经走满了，文件还在传」的尴尬。
04. color-mix() 色块混合 —— 每一帧的交叠色都是算出来的
纯 CSS color-mix() 深色背景
几个半透明圆角色块在一个倾斜容器里持续位移，重叠区域的颜色用 CSS 的 color-mix() 函数实时计算。这和普通做法的区别是实打实的：一般的「混色」效果是提前调好一张渐变图或者写死几个中间色，这一款每一帧的交叠色都是真实混合的结果，色块位置一变，混出来的颜色跟着变。四种色块方案在动画里循环，暗黑背景衬得透明叠色很通透。
拿它换掉项目里那个转圈 spinner，品质感的提升相当明显，而且完全不花运行成本。
唯一要确认的是浏览器支持。color-mix() 属于比较新的 CSS 特性，主流浏览器是近几年才陆续跟上的，如果你的用户里还有相当比例的老版本浏览器或者旧安卓 WebView，得准备一个回退方案——用 @supports 判断一下，不支持就退回普通半透明叠色，视觉打折但不会崩。
05. 双发光球残影 —— 像长曝光拍到的光轨
纯 CSS 3 种配色 残影拖尾
两个发光球在黑色背景上绕圈互相追逐，运动时拖出一串半透明残影，效果接近长曝光拍到的光源轨迹。紫光冷调、暖白灯感、荧光绿霓虹三种配色随手切，氛围完全不同。发光晕染叠上残影层，纯靠 CSS 做到接近后期特效的质感，这在不引任何库的前提下是挺难得的。
什么时候别用它：它依赖黑色背景成立。 发光和残影都是靠亮部在暗底上的对比撑起来的，放到白底页面上，那点晕染会直接消失，只剩两个球在转。所以它的适用面比看上去窄——游戏官网、科技产品页、暗色系创意项目里它很出彩，浅色调的后台系统里换一款更朴素的更合适。反过来说，它做氛围装饰也完全成立，不一定非要当加载动画用。
06. 杯子注水波浪 —— 一个标签、一段关键帧
纯 CSS 单标签实现 水位动画
一只带白色描边和把手的杯子，杯内水面呈波浪起伏，随动画循环缓缓上升又回落。杯身的圆角、投影和高光一起撑出立体感，波纹是靠背景位移驱动横向流动的——整个效果只用一个标签加一段关键帧完成，代码极简，改尺寸、配色和动画时长就能调节奏。
它的语义很具体，这既是优点也是限制。放在饮品品牌页、健康类专题、喝水打卡小工具里，「注水」这个动作和内容是呼应的，用户看一眼就懂；但放进一个后台管理系统的数据加载位，一只杯子在那儿灌水就显得莫名其妙了。具象隐喻类的加载动画，得先确认隐喻和场景对得上。
07. 开关跳动 Loading —— 隐喻很妙，但有个副作用
纯 CSS 胶囊开关 极简
一个胶囊形状的开关，内部圆形滑块上下弹跳，模拟开关反复拨动的状态。这个隐喻确实贴切——加载本身就是在等系统「开启」下一步，概念上对得上。风格简约不幼稚也不严肃，科技类产品、SaaS 平台、工具型应用都合适。
不过它有个副作用值得提前想到：它长得太像一个真的开关组件了。 如果你的页面上本来就有开关类控件，把它放在附近，用户很可能伸手去点。要用的话，最好给它一个明确的加载语境——配上「处理中…」这类文字，或者放在明显不可交互的遮罩层里，别让它孤零零地待在一片可点区域中间。
第三组 · 需要库、框架或 WebGL（08 - 12）—— 选之前先看技术栈
08. SVG + GSAP 点阵缩放 —— 它更像转场，不像 Loading
SVG + GSAP 点阵动效 多方向过渡
圆点尺寸和阵列疏密同步渐变，做出带空间纵深的缩放动效，支持多个方向的过渡。视觉上很干净，是那种放在品牌官网上不会掉价的效果。
但从用法上说，它的性格更接近页面转场而不是常规的等待指示器——点阵铺开又收拢，有明确的「开始」和「结束」，适合放在路由切换、首屏进入、章节过渡这些有确定时长的位置。要拿它当无限循环的等待动画用，会觉得节奏有点长。另外它依赖 GSAP，项目里如果已经在用（做落地页动效的多半都用了）就是白捡；如果没有，为一个加载动画单独引一个动画库，值不值得要自己权衡。
09. React 折叠圆环 —— 加载的同时把图标也换了
React + CSS 图标轮播 无限循环
双色圆形拼接，带折叠翻转动画，翻转的同时自动切换里面的图标，无限循环。比起纯粹转圈，它多了一层信息量——图标可以换成你正在加载的东西，或者干脆用来展示产品的几个核心功能，等待的这几秒就不完全是空转。
前提写在标题里了：它是 React 组件。 非 React 项目要用，得把动画逻辑重写一遍，那基本等于自己做一个。技术栈对上的话，它拿来做页面加载状态、按钮点击反馈、空状态装饰都合适；对不上就直接跳过这一款，本文里纯 CSS 的选择还有好几个。
10. p5.js 呼吸快门 —— 相机光圈的开合节奏
p5.js 光圈开合 正圆约束
灵感来自相机光圈：叶片在收缩与展开之间循环，闭合时线条向中心聚拢成放射状，舒展时随旋转弯曲向外铺开，整体始终被约束在一个正圆轮廓内。「呼吸」这个词用得准确——它的节奏是均匀的、有生理感的，看久了不烦躁，这一点比很多加速转圈的 spinner 强。
它的成本也很直白：为了一个加载动画引入 p5.js，体积上是不划算的。它真正的用武之地是页面本身已经在用 p5.js 的项目——创意官网、互动艺术页、数据可视化站，这些场景里 p5.js 早就在包里了，加这个效果几乎零成本。另外它当科技感 Banner 背景或者装置视觉元素用，也完全成立，不必局限在 Loading 这一个位置。
11. WebGL 流体光球 —— 八个球画在同一块画布上
WebGL2 着色器 7 套预设 参数可调
屏幕中央一颗不断变形蠕动的发光球，表面像流动的液体一样翻涌，边缘带丝状光晕，整体是半透明果冻质感。左侧一排预设主题——极光、余烬、剧毒、寒冰、等离子、幽灵、日光，点一下换配色和形态；右上角有完整参数面板，球体半径、变形幅度、翻涌速度、高光强度、发光颜色都能调。
技术上有个细节值得学：整个页面只用了一块 canvas。 主球和七个缩略图全画在上面，靠分区渲染实现，而不是开八个画布各跑一份——后者在低端设备上是会明显掉帧的。另外它在浅色主题下会自动把界面文字切成深色，这种小照顾往往是作者认真做过的标志。
限制作者自己写明了：需要 WebGL2 支持，老浏览器会直接提示打不开。 这不是「效果打折」而是「完全看不到」，所以上线前必须准备兜底——检测不到就换静态图或纯 CSS 动画。它的性格也不像常规 loading，更适合 AI 产品的思考 / 语音状态提示、科技落地页主视觉、音乐可视化背景这类需要主视觉的位置。
12. 拟物渐变范围滑块 —— 这是让用户拖的那种进度
CSS + 原生 JS 原生 range 蓝紫渐变
轨道有立体凹陷光影，已选进度是蓝紫渐变，拖动时同步显示当前数值。放进这篇是因为它补上了前面十一款都没有的一类：可交互的进度。前面的进度是系统告诉用户「走到哪了」，这一款是用户告诉系统「我要到哪」——播放器进度、音量、表单里的数值调节、后台设置项，用的都是这套。
它有个不显眼但重要的优点：底层用的是原生 range 输入框，只在外观上做了自定义。这意味着键盘方向键调节、屏幕阅读器识别、表单提交取值这些能力是白拿的。很多看起来更炫的自定义滑块是用 div 加拖拽事件手搓的，视觉赢了，无障碍和表单集成全得自己补，代价并不小。
怎么挑：先分清你在等什么
加载动画选型的头一步不是看好不好看，是分清这三种等待，它们对应的做法完全不同。
一、首屏预加载（整页还没出来）——这时候屏幕上什么都没有，动画要撑得住场面，也是唯一值得放视觉重效果的位置。第 11 款的 WebGL 光球、第 08 款的点阵转场、第 10 款的呼吸快门都在这儿合适。注意做兜底和超时逻辑：加载失败时，用户不该对着一个转到天荒地老的动画。
二、局部异步（页面在，某块数据还没回来）——这里要的是克制。动画尺寸要小、要能嵌进容器、不能抢周围内容的注意力。第 01 款合集里挑一个小型的，或者第 03、07 款都行。这种场景其实更应该考虑骨架屏——用灰块把即将出现的内容轮廓先画出来，比一个居中的转圈更能减少「跳变」的感觉，第 01 款的合集里就带了骨架屏形态。
三、有真实进度的长任务（上传、下载、批量处理）——必须用能显示真实百分比的进度条，不能用无限循环动画。第 03 款是合适的外观，但记住要用 JS 把真实进度接进去。任务超过十几秒的，还应该给出剩余时间或者当前步骤，让等待变得可预期。
至于第 12 款的滑块，它不属于上面任何一种——那是让用户主动控制进度的控件，别和加载指示混在一起想。
常见问题
Q：多快的加载才需要加动画？加了会不会反而显得慢？
A：会，而且这是个常见错误。可用性研究里有一组被广泛引用的响应时间界限（Jakob Nielsen 总结的 0.1 秒 / 1 秒 / 10 秒）：0.1 秒以内用户感觉是即时的；1 秒以内思路不会中断，不需要专门的加载提示；超过10 秒用户注意力就会转移，Nielsen 给的建议是这时候要提供百分比进度指示，并且允许用户中断操作——而不是丢一个无限循环的圈让人干等。落到实践上，接口在几百毫秒内返回的，加 loading 反而会因为「闪一下」显得更卡；一般从 500 毫秒左右开始才值得显示，而且要加延迟显示逻辑——先等半秒，还没回来再显示动画，回来了就直接渲染。
Q：无限循环的 spinner 和百分比进度条，怎么选？
A：看你能不能拿到真实进度。拿得到就用进度条，用户能预估还要等多久，容忍度会明显提高；拿不到就用循环动画，千万别拿定时器伪造一个百分比。假进度条最难堪的场景是：它走到 99% 然后卡住不动，用户此时的信任感是直接归零的——他不仅知道要继续等，还知道你在骗他。本文第 03 款是纯 CSS 的固定时长动画，用作氛围没问题，当真实进度用之前一定要接上数据。
Q：prefers-reduced-motion 到底要不要管？
A：要，而且成本很低。有一部分用户会因为前庭功能敏感而在系统里打开「减少动态效果」，持续旋转、缩放、闪烁的动画对他们可能引起眩晕或不适。做法就是加一段媒体查询，在 @media (prefers-reduced-motion: reduce) 里把 animation 关掉或者大幅放慢，换成静态提示或者简单的透明度变化。本文第 01 款合集自带这个处理，其余大部分需要你自己补一行。这既是无障碍的基本要求，也是现在评估前端质量时会看的一项。
Q：骨架屏和加载动画是二选一吗？
A：不是，它们解决的是不同阶段的问题，配合用效果最好。骨架屏适合结构已知的内容区——列表、卡片、文章页，用灰块先把版式撑起来，数据回来后原地填充，页面不会跳动，用户的视线也不用重新找位置。加载动画适合结构未知或者整页等待的场景，比如首屏、弹窗内容、提交后的处理中状态。常见组合是：首屏用一个整页动画，进入之后各个内容块用骨架屏，按钮点击后用局部小动画。三者语义清楚，用户就不会困惑「到底是哪块在加载」。
