我正在為我的網站編碼，我一直試圖讓我的進度條平滑地移動，但是我嘗試的所有東西要么破壞了我的進度條，要么什么都不做

這是我的進步元素:

.listening-progress {
  position: relative;
  top: -15px;
  width: 120px;
  margin-left: 9px;
  background-color: #2a2b2f;
  border-radius: 9px;
  height: 5px;
  border: none;
}


progress {
  width: 120px;
  margin-right: 12px;
  background-color: #2a2b2f;
  border-radius: 9px;
  height: 5px;
  border: none;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;    
}

progress::-moz-progress-bar { background: #fff; border-radius: 9px; transition: width 0.5s ease;} 
progress::-webkit-progress-value { background: #fff; border-radius: 9px; transition: width 0.5s ease;}
progress::-moz-progress-bar { background: #fff; border-radius: 9px; transition: width 0.5s ease;}
progress { color: #fff; border-radius: 9px; transition: width 0.5s ease;}

.prog-time {
  color: #fff;
  font-size: 15px;
  line-height: 16px;
  border-radius: 9px;
}

<progress style="margin-top: 5px; border-radius: 9px;" class="listening-progress" id="prog" value="0" max="100"></progress>

您將需要動畫化value屬性，但是這里有一個很好的動畫進度條指南

let progressBar = document.getElementById("prog");
let speed = 10; // 10% of the progress bar
let iteration = 1 * 1000; // secands

let interval = setInterval(()=>{
 progressBar.value += speed;
 if(progressBar.value >= 100) clearInterval(interval);
}, iteration);

.listening-progress {
  position: relative;
  top: -15px;
  width: 120px;
  margin-left: 9px;
  background-color: #2a2b2f;
  border-radius: 9px;
  height: 5px;
  border: none;
}


progress {
  width: 120px;
  margin-right: 12px;
  background-color: #2a2b2f;
  border-radius: 9px;
  height: 5px;
  border: none;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;  
}

progress::-moz-progress-bar { background: #fff; border-radius: 9px; transition: width 0.5s ease;} 
progress::-webkit-progress-value { background: #fff; border-radius: 9px; transition: width 0.5s ease;}
progress::-moz-progress-bar { background: #fff; border-radius: 9px; transition: width 0.5s ease;}
progress { color: #fff; border-radius: 9px; transition: width 0.5s ease;}

.prog-time {
  color: #fff;
  font-size: 15px;
  line-height: 16px;
  border-radius: 9px;
}

<progress style="margin-top: 5px; border-radius: 9px;" class="listening-progress" id="prog" value="0" max="100"></progress>