首先通过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"></div> Loading... 0%
.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
创建加载进度球体动画是一个灵活且强大的方法。 掌握了这些技巧，你就可以创建出各种各样的加载动画，让你的网站更加生动有趣。
暂无评论内容