<div>
  <progress class="progress" value="0" max="300">
     <span class="percent">0</span>%
  </progress>
</div>

<div>
  <progress class="progress" value="0" max="300">
     <span class="percent">0</span>%
  </progress>
</div>

<div>
  <progress class="progress" value="0" max="300">
     <span class="percent">0</span>%
  </progress>
</div>

::-webkit-progress-bar {
    background: #000;
}
::-webkit-progress-value {
    background: #FAD4E7;
}
::-moz-progress-bar {
    background: #FAD4E7;
}
progress {
    display: block;
    color: red;
    border-radius: 5px;
    box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    width: 500px;
    height: 5px;
    margin-top: 15px;
    line-height: 21px;
    font-size: 15px;
    font-family: sans-serif;
    text-align: center;
}

let progress = document.querySelectorAll('.progress');
function changeProgress() {
  progress.forEach(bar => {
    let percent = bar.querySelector('.percent');
    if ( !bar.value) bar.value = +bar.getAttribute("value");
    if ( !bar.max) bar.max = +bar.getAttribute("max");
    if (bar.value >= bar.max) {
        return;
    }
    bar.value++;
    percent.innerHTML = Math.floor(bar.value / bar.max * 100);
    setTimeout(changeProgress, 500);
  })

}
changeProgress();