如何实现可通过百分比变量控制的圆形CSS/JS动画加载器？

核心结论 #

预定义的@keyframes动画确实无法和外部实时变化的进度变量绑定，这一点你的判断是准确的。但无需依赖keyframes的CSS方案完全可以实现和外部变量联动的圆形加载器，以下是两种可直接落地的实现思路： #

方案1：CSS锥形渐变实现（最简方案，现代浏览器兼容） #

实现原理 #

利用CSS conic-gradient 锥形渐变和CSS自定义变量实现进度渲染，进度值直接通过JS修改CSS变量即可实时更新，不需要任何动画关键帧。

代码示例 #

<div class="circle-loader"></div>

.circle-loader {
  /* 进度变量，默认0%，可通过JS实时修改 */
  --progress: 0%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 锥形渐变渲染进度 */
  background: conic-gradient(#2196F3 var(--progress), #e0e0e0 var(--progress));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 中间挖空形成环形加载器，不需要环形可删除该伪类 */
.circle-loader::after {
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
}

const loader = document.querySelector('.circle-loader')
let progress = 0
// 模拟进度更新，真实场景替换为文件上传的进度回调即可
const timer = setInterval(() => {
  progress += 1
  loader.style.setProperty('--progress', `${progress}%`)
  if (progress >= 100) clearInterval(timer)
}, 30)

方案2：SVG实现（全浏览器兼容，灵活性更高） #

实现原理 #

利用SVG圆形路径的描边属性控制进度，兼容性覆盖所有主流浏览器，支持描边圆角、渐变填充等高级自定义需求。

代码示例 #

<svg class="svg-loader" width="100" height="100">
  <!-- 底部背景轨道 -->
  <circle cx="50" cy="50" r="40" fill="none" stroke="#e0e0e0" stroke-width="10"/>
  <!-- 进度描边层 -->
  <circle 
    class="progress-circle" 
    cx="50" cy="50" r="40" 
    fill="none" stroke="#2196F3" 
    stroke-width="10"
    stroke-dasharray="251.2" 
    stroke-dashoffset="251.2" 
    stroke-linecap="round"
    transform="rotate(-90 50 50)"
  />
</svg>

const progressCircle = document.querySelector('.progress-circle')
// 计算圆形路径周长：2πr，r对应上方circle元素的r属性值40
const circumference = 2 * Math.PI * 40
let progress = 0
// 模拟进度更新，真实场景替换为文件上传的进度回调即可
const timer = setInterval(() => {
  progress += 1
  const offset = circumference * (1 - progress / 100)
  progressCircle.style.strokeDashoffset = offset
  if (progress >= 100) clearInterval(timer)
}, 30)

对接真实上传场景说明 #

上述示例中的setInterval模拟逻辑可以直接替换为文件上传的onprogress事件回调，获取到真实上传百分比后直接赋值给对应CSS变量/属性即可，无需其他额外修改。

内容的提问来源于stack exchange，提问作者dbonneville