虚幻引擎官网的Loading动画并不是一个单纯等待的装饰元素，它在保持流畅旋转效果的同时，还加入了点击暂停与恢复的交互能力。用户单击圆环时，动画会立即停在当前帧；再次单击时，圆环又会从暂停位置继续转动。这一交互看似简单，却能有效减少长时间等待带来的枯燥感，同时也展示了CSS动画与JavaScript事件结合的基本实现思路。下面从动画样式、页面结构、交互逻辑和扩展方法几个方面展开说明。
一、基础Loading动画的CSS实现
要实现Loading动画，首先需要创建一个可以无限旋转的圆环。圆环本身并不需要使用复杂的图形库，利用CSS的边框特性就能完成。设置一个正方形元素，给其四条边分别添加边框，并把边框颜色设计成浅色，仅将其中一条边的颜色设置为高亮色，再把元素的边框圆角调整为50%，就能得到一个类似转圈的圆环。动画部分通过@keyframes定义旋转过程，从0度旋转到360度，再将动画绑定到元素上。
在animation复合属性中，可以指定动画名称、持续时间、运动曲线和循环次数。为了让圆环看起来一直在转动，循环次数使用infinite，运动曲线使用linear，这样旋转过程不会出现明显的加速或减速。圆环容器还需要设置cursor: pointer，从视觉上提示用户该元素可以点击，为后面的JavaScript交互做好准备。
暂停效果的核心属性是animation-play-state。当该属性值为paused时，动画会停留在当前帧；当值为running时，动画会继续从暂停位置播放。因此，不必销毁动画或重新创建元素，只要切换这个状态即可。通常会单独定义一个暂停类，比如loading_paused，把animation-play-state: paused写在该类中，由JavaScript动态添加或移除。
/* 定义旋转动画关键帧 */
@keyframes rotate_loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading容器基础样式 */
.loading_container {
width: 80px;
height: 80px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: rotate_loading 1s linear infinite;
cursor: pointer;
}
/* 暂停时使用的状态类 */
.loading_paused {
animation-play-state: paused;
}
二、HTML结构搭建
HTML部分非常简单，只使用一个容器元素即可承载圆环动画。该元素同时拥有基础类loading_container和唯一标识id。loading_container负责应用圆环外观和旋转动画，id则用于JavaScript获取元素并绑定点击事件。
从结构上看，Loading动画并不需要嵌套多个子元素。一个 <div> 元素足以完成展示与交互。保持结构简单有利于后续维护，也更容易把样式、结构与行为分离：视觉效果交给CSS，标记结构交给HTML，交互状态交给JavaScript。
使用单容器结构时，类名和id的命名应当保持语义清晰。loading_container明确表示这是一个加载动画容器，loadingBox则方便在脚本中读取。后续如果需要调整动画尺寸、颜色或旋转速度，只需修改对应CSS规则，不必改动HTML结构。
<div class="loading_container" id="loadingBox"></div>
三、JavaScript点击暂停交互逻辑
JavaScript需要完成两件事：一是监听容器元素的点击事件，二是在点击时切换动画的运行状态。可以使用document.getElementById获取元素，再调用addEventListener绑定click事件。为了让代码状态清晰，定义一个布尔变量isRunning记录当前动画是否正在运行，初始值为true。
在点击回调函数中，根据isRunning的值判断下一步操作。如果动画正在运行，就向容器添加loading_paused类，使animation-play-state变为paused，同时把isRunning改为false。如果动画处于暂停状态，则移除该类，让动画恢复运行，并同步更新状态变量。每次点击后，状态标记和视觉表现保持一致，避免连续点击时出现逻辑混乱。
这种切换方式并不会重置动画的当前帧。也就是说，圆环会在暂停时保留已经旋转的角度，恢复后会从该角度继续旋转。这与重新播放动画是两种不同的交互体验。对于暂停后继续的需求而言，使用classList.add和classList.remove操作类名是最直接、最容易维护的方式。
// 获取Loading容器元素
const loadingBox = document.getElementById('loadingBox');
// 状态标记，true表示正在运行，false表示已暂停
let isRunning = true;
// 监听点击事件
loadingBox.addEventListener('click', function() {
if (isRunning) {
// 当前正在运行，点击后暂停
loadingBox.classList.add('loading_paused');
isRunning = false;
} else {
// 当前已暂停，点击后恢复运行
loadingBox.classList.remove('loading_paused');
isRunning = true;
}
});
四、效果验证与扩展
完成CSS、HTML和JavaScript之后，在浏览器中打开页面即可验证效果。圆环会持续旋转，单击圆环则立即停在当前角度，再次单击则继续旋转。这个现象与虚幻引擎官网中Loading动画的点击暂停逻辑一致。由于animation-play-state在现代浏览器中的支持度较高，因此该方案可以在大多数环境中稳定运行。
如果希望暂停时提供更多反馈，例如在圆环中央显示已暂停的提示文字，可以在loading_paused类中增加颜色、透明度等额外样式，也可以在点击回调里继续操作其他DOM节点。动画暂停本身与提示信息的显示互不干扰，因此扩展起来非常灵活。
注意：animation-play-state的兼容性良好，主流现代浏览器均支持。如果需要适配非常老旧的浏览器，可以考虑通过把animation属性切换为none来停止动画，但这种方式会丢失动画进度，需要按实际需求取舍。
扩展：重置动画进度的方法
有些场景下，用户希望暂停之后不是继续旋转，而是重新回到初始状态，例如重新加载数据时。此时不能简单使用animation-play-state，因为它只能暂停和继续。重置动画进度需要通过JavaScript重新设置animation属性。
可以先移除当前动画，把style.animation设为none；接着触发一次浏览器重排，让浏览器确认样式已经改变；最后重新写入原来的动画属性。触发重排常用的方法是读取offsetHeight。如果不进行强制重排，浏览器可能会把连续的样式修改合并，导致动画不会真正重启。
// 重置动画到初始状态
function resetLoading() {
// 先移除动画绑定
loadingBox.style.animation = 'none';
// 读取布局信息，强制浏览器重排
loadingBox.offsetHeight;
// 重新绑定旋转动画
loadingBox.style.animation = 'rotate_loading 1s linear infinite';
// 恢复运行状态标记
isRunning = true;
// 移除暂停样式
loadingBox.classList.remove('loading_paused');
}
总体而言，实现一个可点击暂停的Loading动画并不复杂，关键是把CSS状态类、HTML容器和JavaScript事件监听三者结合起来。动画的视觉部分由@keyframes和animation完成，暂停状态由animation-play-state控制，交互状态由脚本中的布尔变量维护。如果只是实现暂停与恢复，添加或移除loading_paused类即可；如果需要重置进度，则必须重新设置动画属性并强制重排。根据实际产品需求选择暂停后继续还是暂停后重置，可以进一步提升加载过程的用户体验。
Unreal_EngineLoading_animationclick_pauseJavaScriptCSS_animation修改时间：2026-07-17 12:51:21