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

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">

    <div id="progress"></div>

</div>

设置您自己的进度条宽度和高度。

#container {

    width: 'Set a width here';

    height: 'Set a height here';

    text-align: left;

}

#progress {

    width: 0;

    height: 100%;

}

不要忘记添加您自己的样式。

progress只需随着进度的变化更改 div 的宽度即可。设置宽度，就像10%您的进度一样10%。但是您需要为进度条设置某些样式。

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;

    /* Assuming Puebrig is the current percentage value */

    document.getElementById('progress').style.width = Puebrig+'%';

}, 1000);