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

【问题标题】：Update an progress-bar with an percentage number?用百分比数字更新进度条？
【发布时间】：2020-12-08 17:05:12
【问题描述】：

我有一个动画进度条，在我的 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>

【问题讨论】：

标签： javascript html css progress-bar

【解决方案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);

【讨论】：