首先通过html创建一个div容器作为加载球体；2. 使用css的radial-gradient结合两个圆形渐变模拟球体光影效果，并设置background-size和background-position控制渐变区域；3. 利用css变量--progress动态控制radial-gradient的大小，实现进度变化；4. 将background-color设为#fff或透明，确保渐变进度可见；5. 通过javascript的requestanimationframe逐步更新--progress值，模拟0%到100%的加载过程；6. 可添加loader-text元素并用javascript同步更新加载百分比文本；7. 当进度达到100%时，执行隐藏动画或显示内容等后续操作；8. 优化性能可使用will-change: transform触发硬件加速，减少dom操作频率；9. 自定义颜色可通过修改radial-gradient中的颜色值实现，也可调整渐变位置或类型增强视觉效果；最终实现一个平滑、可定制的加载进度球体动画，并在加载完成后执行相应逻辑。
使用CSS和
radial-gradient渐变，可以创建一个引人入胜的加载进度球体动画。核心在于利用
radial-gradient模拟球体的光影效果，并结合
animation属性驱动进度变化。
首先，你需要一个HTML元素作为容器：
<div class="loader"></div>
接下来，是CSS部分，这才是灵魂所在。我们先定义一个基本的球体样式：
立即学习“前端免费学习笔记（深入）”；
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle at top left, #29abe2, #fff 20%),
radial-gradient(circle at bottom right, #29abe2, #fff 20%);
background-color: #29abe2; /* fallback color */
background-size: 50% 50%;
background-position: top left, bottom right;
background-repeat: no-repeat;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}这段代码创建了一个圆形，并使用两个
radial-gradient模拟光影效果。
animation属性让它旋转起来。但是，这只是个旋转的球体，还不是加载进度。
如何实现加载进度？
关键在于动态改变
radial-gradient的大小和位置。我们可以使用CSS变量和JavaScript来实现。
CSS变量驱动的进度控制
首先，在CSS中定义变量控制渐变的位置和大小：
.loader {
/* ... 之前的样式 ... */
--progress: 0%; /* 初始进度 */
background: radial-gradient(circle at top left, #29abe2 var(--progress), transparent var(--progress)),
radial-gradient(circle at bottom right, #29abe2 var(--progress), transparent var(--progress));
background-color: #fff; /* 覆盖之前的 fallback color */
background-size: 50% 50%;
background-position: top left, bottom right;
background-repeat: no-repeat;
animation: none; /* 移除旋转动画，改为进度动画 */
}
@keyframes progress {
0% {
--progress: 0%;
}
100% {
--progress: 100%;
}
}现在，
radial-gradient的大小由
--progress变量控制。 注意
background-color要改为
#fff，否则进度会看不出来。移除旋转动画，因为我们想让它显示进度。
JavaScript控制CSS变量
然后，使用JavaScript来动态改变
--progress的值：
const loader = document.querySelector('.loader');
let progress = 0;
function updateProgress() {
progress += 1; // 模拟加载进度
loader.style.setProperty('--progress', `${progress}%`);
if (progress < 100) {
requestAnimationFrame(updateProgress);
}
}
requestAnimationFrame(updateProgress);这段代码会不断增加
--progress的值，从而改变
radial-gradient的大小，模拟加载进度。
为什么我的球体看起来怪怪的？
可能是
background-color的设置问题。 确保
background-color设置为与背景相同的颜色，或者设置为透明，才能看到
radial-gradient的效果。 另外，
background-size和
background-position的设置也很重要，它们决定了光影的位置和大小。
如何优化动画性能？
使用
will-change
属性:will-change: transform;
可以告诉浏览器提前优化transform
属性的动画。避免频繁的DOM操作: 尽量减少JavaScript对DOM的直接操作，可以将数据缓存起来，然后一次性更新DOM。
使用硬件加速: 确保你的动画使用了硬件加速，可以提高动画的流畅度。
如何改变球体的颜色和光影效果？
修改
radial-gradient的颜色值即可。例如，将
#29abe2改为其他颜色，或者添加更多的颜色值，可以创建更复杂的光影效果。 你还可以尝试改变
radial-gradient的位置，例如
circle at center，或者使用不同的渐变类型，例如
linear-gradient。
如何添加加载文本？
可以在HTML中添加一个
span元素，用于显示加载文本，然后使用JavaScript来动态更新文本内容。
<div class="loader-container"> <div class="loader"></div> <span class="loader-text">Loading... 0%</span> </div>
.loader-container {
position: relative;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 12px;
}const loaderText = document.querySelector('.loader-text');
function updateProgress() {
progress += 1; // 模拟加载进度
loader.style.setProperty('--progress', `${progress}%`);
loaderText.textContent = `Loading... ${progress}%`; // 更新文本
if (progress < 100) {
requestAnimationFrame(updateProgress);
}
}加载完成后如何处理？
在JavaScript中，当
progress达到100%时，可以执行加载完成后的操作。例如，隐藏加载动画，显示内容，或者跳转到其他页面。
if (progress < 100) {
requestAnimationFrame(updateProgress);
} else {
// 加载完成后的操作
loaderContainer.style.display = 'none'; // 隐藏加载动画
// 显示内容...
}总而言之，使用
radial-gradient创建加载进度球体动画是一个灵活且强大的方法。 掌握了这些技巧，你就可以创建出各种各样的加载动画，让你的网站更加生动有趣。
