用百分比数字更新进度条？

Question

我有一个动画进度条，在我的 Js 代码中我有一个百分比数字变量Puverg，如何更新进度条以具有与百分比数字相同的进度？

var x = setInterval(function() {

    var now = new Date().getTime();

    var distance=countDownDate-now;

    var vergangen=intervall-distance;

    var Puverg=(vergangen/intervall)*100;

    var Puebrig=100-Puverg;

}, 1000);

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

body{

  font-family:Montserrat, sans-serif;

  background: black;

  color: white;

}

.container{

  margin: 100px auto;

  margin-top: 330px;

  width: 400px;

  text-align: center;

  position: relative;

}

.progress2{

  border-radius: 30px;

  background-color: #fff;

}

.progress-bar2{

  height: 18px;

  border-radius: 30px;

  transition: 0.4s linear;

  transition-property: width,background-color;

}

.progress-moved .progress-bar2{

  background-color:#f3c623;

  animation: progress 5s infinite;

}

@keyframes progress{

  0%{

    width:0%;

    background:#f9bcca;

  }

  100%{

    width:100%;

    background:#f3c623;

    box-shadow: 0 0 40px #f3c623;

  }

}

.icon{

  color:#f3c623;

  animation: icon 5s infinite;

  background-color: transparent;

  padding-right: 400px;

  padding-bottom: 20px;

}

@keyframes icon{

  0%{

    opacity: .2;

    text-shadow: 0 0 0 #f3c623;

  }

  100%{

    opacity: 1;

    text-shadow: 0 0 10px #f3c623;

  }

}

.loader{

  --p:0;

  animation: p 5s steps(100) infinite;

  counter-reset: p var(--p);

  font-size: 2.1em;

  position: absolute;

  bottom: 45px;

  left: 325px;

  color:#f3c623;

}

.loader::after{

  content: counter(p) "%";

}

@keyframes p{

  90%,100%{

    --p: 100;

  }

}

Answer 1

我不确定哪个元素是你的progress bar。假设您有两个 div 来形成进度条。<div id="container">&nbsp; &nbsp; <div id="progress"></div></div>设置您自己的进度条宽度和高度。#container {&nbsp; &nbsp; width: 'Set a width here';&nbsp; &nbsp; height: 'Set a height here';&nbsp; &nbsp; text-align: left;}#progress {&nbsp; &nbsp; width: 0;&nbsp; &nbsp; height: 100%;}不要忘记添加您自己的样式。progress只需随着进度的变化更改 div 的宽度即可。设置宽度，就像10%您的进度一样10%。但是您需要为进度条设置某些样式。var x = setInterval(function() {&nbsp; &nbsp; var now = new Date().getTime();&nbsp; &nbsp; var distance=countDownDate-now;&nbsp; &nbsp; var vergangen=intervall-distance;&nbsp; &nbsp; var Puverg=(vergangen/intervall)*100;&nbsp; &nbsp; var Puebrig=100-Puverg;&nbsp; &nbsp; /* Assuming Puebrig is the current percentage value */&nbsp; &nbsp; document.getElementById('progress').style.width = Puebrig+'%';}, 1000);