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

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; } }

 <div class="container"> <i class="fas fas-3x fa battery-full icon"></i> <div class="progress2 progress-moved"> <div class="progress-bar2"></div> <div class="loader" style="--n: 1; --f:0;"></div> </div> </div> <script> CSS.registerProperty({ name: "--p", syntax: "<integer>", initialValue: 0, inherits: true, }) </script>

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%;
}

不要忘记添加自己的 styles。

只需随着进度的变化更改progress div 的宽度。 如果您的进度为10% ，请将宽度设置为10% 。 但是你需要为你的进度条设置一定的 styles。

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);