加载动画为什么会转
网页加载、应用启动、文件下载时，屏幕上显示的旋转动画（加载指示器）是数字生活中最常见的图标之一。
那个旋转的动画不仅仅是在说"请稍候"。它背后蕴含着巧妙利用人类心理的 UX（用户体验）设计智慧。
等待的心理学 - 不确定性带来痛苦
等待时间中主要的压力来源之一是"不知道什么时候结束"的不确定性。即使等待的时间一样长，能否看到进度也会大幅改变感知时间。看不到尽头的等待，会比实际时长感觉更久。
- 什么都不显示：压力最大。"是不是卡住了？""要不要再按一次按钮？"，焦虑不断积累
- 加载动画在转：知道"正在处理"可以减少焦虑。但"什么时候完成"仍然未知
- 进度条在前进：进度和预计剩余时间可见，压力最小
加载动画比什么都不显示要好得多，但提供的信息不如进度条，它是一种折中方案。
加载动画的历史 - 从沙漏到旋转圆圈
沙漏光标（1980 年代起）
在早期版本的 Windows 中，处理期间鼠标光标会变成沙漏。沙漏是一个出色的隐喻，能直观地传达"时间在流逝"，但由于看不到还剩多少沙子，它不提供进度信息。
彩虹光标（macOS）
macOS 上旋转的彩虹圆圈（昵称"彩虹光标"或"沙滩球"）在应用程序无响应时出现。用户称之为"死亡沙滩球"，是最令人讨厌的图标之一。
CSS 与 SVG 的加载动画（2010 年代以后）
Web 和应用中使用的加载动画是用 CSS 动画或 SVG 实现的轻量级动画。虽然设计变化丰富，旋转的圆圈、依次亮起的点、波动的条，但它们都有一个共同目的：传达"正在处理"。
加载动画的转速也有讲究
加载动画的旋转速度会影响用户心理。
- 太快：产生紧迫感和焦虑。给人"可能出了什么问题"的印象
- 太慢：强化处理缓慢的印象。让用户觉得"这个网站好重"
- 适中速度（每转 1-2 秒）：给人平静的印象，传达"处理顺利"的信息
在 Google 的 Material Design 实现（Material Components）中，加载动画圆弧伸缩一个周期被设为 1,333 毫秒（约 1.3 秒）。并没有哪份指南规定必须采用这个速度，但由于它是广泛使用的组件的默认值，实际上已成为大家参照的标准。
比加载动画更好的选择 - 骨架屏
自 2010 年代中期以来，越来越多的网站和应用开始采用"骨架屏"来替代加载动画。骨架屏在内容加载前显示布局的框架（灰色占位符）。
Facebook、YouTube、LinkedIn 等都已采用，它具有以下优势：
- 能够预测"将要显示什么"，使等待感觉更短
- 由于页面结构先可见，内容出现的瞬间用户就可以开始阅读
- 与加载动画相比，"被迫等待"的感觉更弱
等待时间的"3 秒法则"
Web 业界广泛引用一条经验法则：加载超过 3 秒，放弃的人就会明显增多。具体的放弃比例会随测量时期、行业和网络环境大幅变化，无法归结为单一数字，但等待越久、离开的人越多这一趋势不会改变。CDN 加速分发、图片优化、消除不必要的 JavaScript，减少等待时间本身才是最有效的 UX 改善。尤其是在儿童使用互联网的场景中，加载缓慢容易成为误操作和不安的诱因，因此优化显示速度在安全层面同样重要。
加载动画和骨架屏是让等待时间"感觉舒适"的技巧，但比不上"消除"等待时间。IP 确认酱加载速度快的原因就在于对服务器响应速度和页面优化的重视。
总结
加载动画看起来只是一个简单的"正在处理"动画，但实际上是考虑了人类心理的 UX 设计产物。它减少不确定性，缩短感知等待时间，防止用户流失。下次看到加载动画在转时，想象一下背后正在发生的处理，DNS 解析、TCP 连接、TLS 握手。
本文相关术语
常见问题
为什么要显示加载动画？
为了告诉用户"正在处理中"，减轻焦虑。如果什么都不显示，用户会担心"是不是卡住了"，但看到动画在转就知道"等一下就会显示"。
什么是骨架屏？
在内容加载完成前，先显示布局骨架(灰色占位符)的方法。Facebook和YouTube采用了这种方式，比加载动画的感知等待时间更短。
页面加载超过几秒用户会离开？
Web业界广泛引用一条经验法则：加载超过3秒，放弃的人就会明显增多。具体比例会随行业和网络环境大幅变化，与其追逐某个数字，不如缩短等待时间本身，这才是最有效的UX改善。