如何实现网页progress bar的平滑动态移动效果？

你之前的代码问题在于：给progress元素本身加了width的过渡，但进度条的实际进度是通过value属性控制的，不是width，而且浏览器对progress的原生样式控制需要针对伪元素设置过渡。另外你的CSS里重复定义了两次progress::-moz-progress-bar，容易导致样式冲突。

修正后的CSS代码 #

/* 统一progress基础样式 */
progress.listening-progress {
  position: relative;
  top: -15px;
  width: 120px;
  margin-left: 9px;
  margin-top: 5px;
  background-color: #2a2b2f;
  border-radius: 9px;
  height: 5px;
  border: none;
}

/* WebKit内核浏览器（Chrome、Safari等）的进度条样式 */
progress.listening-progress::-webkit-progress-value {
  background-color: #fff;
  border-radius: 9px;
  /* 给进度值添加平滑过渡 */
  transition: width 0.5s ease;
}

/* Firefox的进度条样式 */
progress.listening-progress::-moz-progress-bar {
  background-color: #fff;
  border-radius: 9px;
  transition: width 0.5s ease;
}

/* 基础文本样式 */
.prog-time {
  color: #fff;
  font-size: 15px;
  line-height: 16px;
}

简化后的HTML代码 #

<progress class="listening-progress" id="prog" value="0" max="100"></progress>

动态修改进度的JS示例 #

要看到平滑效果，需要通过JS动态修改progress的value属性，比如：

const progressBar = document.getElementById('prog');
let currentValue = 0;

// 模拟进度增加
const simulateProgress = () => {
  if (currentValue < 100) {
    currentValue += 10;
    progressBar.value = currentValue;
    setTimeout(simulateProgress, 500);
  }
};

// 启动模拟
simulateProgress();

关键说明 #

• 过渡效果必须加在进度条的伪元素上（::-webkit-progress-value和::-moz-progress-bar），这些伪元素才是实际显示进度的部分
• 不要重复定义相同的CSS规则，避免样式覆盖或冲突
• 进度变化必须通过修改progress的value属性实现，不要尝试修改width来控制进度

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