如何用CSS或jQuery实现圆形进度条的数值动画效果？

要实现指定时长内进度条与数字的同步动画，我们可以通过CSS过渡配合JavaScript逐帧控制的方式完成，以下是完整实现方案：

核心思路 #

• 利用CSS变量--value控制环形进度的显示，添加过渡效果让进度变化更平滑
• 通过JavaScript精确控制动画时长，同步更新进度条的CSS变量和中间的数字文本，保证两者动画节奏一致

完整实现代码 #

HTML 结构 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="chart" class="chart" style="--value: 0%;">
  <div class="chart-percentage">
    <i class="fa-solid fa-user-check"></i>
    <p>0%</p>
  </div>
</div>

CSS 样式 #

.chart {
  --size: 236px;
  --value: 0%;
  --bord: 20px;
  --color: #4187C9;
  width: var(--size);
  height: var(--size);
  border: var(--bord) solid transparent;
  border-radius: 50%;
  background: linear-gradient(white, white) padding-box, conic-gradient(var(--color) var(--value), lightgrey var(--value)) border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  box-sizing: border-box;
  /* 添加过渡效果，实现进度条平滑变化 */
  transition: --value 0.05s linear;
}

.chart-percentage p {
  margin: 0;
  font-size: 40px;
  color: #00C1D2;
  font-weight: 600;
}

JavaScript 控制逻辑 #

const chart = document.getElementById('chart');
const percentageText = document.querySelector('.chart-percentage p');
const targetPercentage = 30; // 目标进度百分比
const duration = 2000; // 动画总时长（单位：毫秒）
const startTime = Date.now();

function updateProgress() {
  const elapsedTime = Date.now() - startTime;
  // 计算当前动画完成进度（0-1）
  const progressRatio = Math.min(elapsedTime / duration, 1);
  // 计算当前显示的百分比
  const currentPercent = Math.floor(progressRatio * targetPercentage);

  // 更新进度条的CSS变量
  chart.style.setProperty('--value', `${currentPercent}%`);
  // 更新中间的数字文本
  percentageText.textContent = `${currentPercent}%`;

  // 未完成动画时，继续请求下一帧更新
  if (progressRatio < 1) {
    requestAnimationFrame(updateProgress);
  }
}

// 启动动画
updateProgress();

关键说明 #

1. CSS过渡配置：.chart中的transition: --value 0.05s linear会让--value变量的变化产生平滑过渡，配合JavaScript的逐帧更新，形成连贯的环形进度动画。
2. JavaScript精确控制：通过requestAnimationFrame实现浏览器原生的帧同步更新，根据已流逝时间和总时长计算当前进度，确保动画严格按照设定时长完成，同时同步更新数字文本，避免进度条与数字脱节。
3. 可自定义参数：你可以修改targetPercentage（目标进度）和duration（动画时长）来调整动画的最终效果，满足不同场景需求。

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