Javascript 进度-网页的百分比栏

我想做一个加载条，但有百分比。我的意思是想象一下，当它达到50%时，它会显示出这个数字，它也会一直填充到一半。如果它是75%，它将上升到3/4

我正试图用HTML、CSS和JS来实现这一点。到目前为止，我做的一切，但在同一时间，数字将增加（通过点击按钮），模式将填补根据百分比？这部分对我很有挑战性。 如果可能的话，你能给我带路吗？或者即使有我可以学习的例子

更新下面的代码

    <script>
      var i = 0;

      function buttonClick5() {
        i += 5;
        document.getElementById('demo').innerHTML = i + "€";

      }

      function percentage(per) {
        return (100 / 100) * per;
      }

    </script>
    <div class="textContainer">
    <p class="perc" id="here"></p>
    <script>
      document.getElementById('here').textContent = percentage(10) + "%";
    </script>
    <h2 id="demo">0€</h2>
  </div>

---

基本上，对于那个些，我可以让模式作为百分比的背景移动，但总是100%

使用百分比变量作为显示进度的div的宽度。将click-偶数侦听器添加到您的按钮中，该按钮将更新该百分比变量和div的宽度。如果您制作一个同时更新这两个变量的回调函数，那么对您来说就很容易了。请在此处共享您的代码，以便我们进一步提供帮助。

您目前尝试的代码中是否有任何代码可以共享？我将代码放在下面！我没有完全适应我正在学习的前端，可以通过我编写的代码告诉我吗？

.textContainer {
margin-top:-10%;
margin-left: 30%;
height: auto;

  text-align: center;
}

.textContainer h2 {

margin-left: -40%;
  font-size: 500px;
  color: rgba(225, 225, 225, .1);
  background-image:  url(color3.jpg);
  background-repeat:repeat;
  -webkit-background-clip: text;
  animation: animateMid 15s linear infinite;
}

@keyframes animateMid {
  0% {
    background-position: left 0px top 0px;
  }

  1% {
    background-position: left 1200px top 0px;
  }
}