CSS怎样制作加载进度球体动画？radial-gradient渐变-css教程-PHP中文网

CSS怎样制作加载进度球体动画？radial-gradient渐变

蓮花仙者

发布： 2025-08-15 09:50:02

原创

552人浏览过

首先通过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渐变

使用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

登录后复制

的大小，模拟加载进度。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

为什么我的球体看起来怪怪的？

可能是

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

登录后复制

创建加载进度球体动画是一个灵活且强大的方法。掌握了这些技巧，你就可以创建出各种各样的加载动画，让你的网站更加生动有趣。

以上就是CSS怎样制作加载进度球体动画？radial-gradient渐变的详细内容，更多请关注php中文网其它相关文章！