在页面加载场景中，使用带有渐变效果的球体进度动画可以提升用户的等待体验，借助CSS的radial-gradient属性可以轻松实现这类效果，不需要依赖额外的图片资源。
基础球体样式搭建
首先我们需要创建一个圆形的容器，作为加载球体的基础结构，设置固定的宽高和圆角属性让元素呈现正圆形。
/* 球体基础样式 */
.progress-sphere {
width: 120px;
height: 120px;
border-radius: 50%;
/* 初始渐变背景 */
background: radial-gradient(circle at 30% 30%, #4facfe 0%, #00f2fe 70%, #1a73e8 100%);
position: relative;
overflow: hidden;
}
结合radial-gradient实现渐变效果
radial-gradient是CSS的径向渐变函数，我们可以调整渐变的中心点、颜色分布来模拟球体的光影效果，让平面圆形看起来有立体感。
渐变参数说明：
circle表示渐变形状为圆形at 30% 30%表示渐变中心点位于元素左上角30%的位置，模拟光源方向- 后面的颜色值表示渐变的颜色分布，从浅到深模拟球体的明暗变化
添加进度变化动画
要实现进度加载的效果，我们可以通过遮罩层配合旋转动画，模拟进度从0到100%的变化过程，同时可以结合CSS变量动态控制进度值。
/* 定义进度变量 */
.progress-sphere {
--progress: 0;
}
/* 遮罩层样式，用于显示进度 */
.progress-sphere::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 使用锥形渐变实现进度遮罩 */
background: conic-gradient(#e0e0e0 0deg, #e0e0e0 calc(var(--progress) * 3.6deg), transparent calc(var(--progress) * 3.6deg), transparent 360deg);
border-radius: 50%;
z-index: 1;
}
/* 旋转动画，让球体更有动态感 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.progress-sphere {
animation: rotate 2s linear infinite;
}
完整示例代码
下面是可直接运行的完整代码，包含HTML结构和对应的CSS样式，修改--progress的值就可以调整加载进度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS加载进度球体动画</title>
<style>
.progress-sphere {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #4facfe 0%, #00f2fe 70%, #1a73e8 100%);
position: relative;
overflow: hidden;
--progress: 60; /* 进度值，0-100之间 */
animation: rotate 2s linear infinite;
}
.progress-sphere::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(#e0e0e0 0deg, #e0e0e0 calc(var(--progress) * 3.6deg), transparent calc(var(--progress) * 3.6deg), transparent 360deg);
border-radius: 50%;
z-index: 1;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 进度文本样式 */
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
font-weight: bold;
z-index: 2;
}
</style>
</head>
<body>
<div class="progress-sphere">
<span class="progress-text">60%</span>
</div>
</body>
</html>
注意事项
如果需要兼容旧版本浏览器，需要注意radial-gradient和conic-gradient的兼容性，必要时可以添加浏览器前缀。另外修改进度时，需要同时更新--progress变量和对应的进度文本，保证显示一致。
CSSradial_gradient加载动画球体动画修改时间：2026-07-13 17:30:30