Setting width of progress-bar (countdown) before first "tick" (no additional libraries)

I'd like to set the width of a countdown progress-bar before the first tick gets triggered (without additional libraries, only with javascript, html and css in one code file) I've tried to change the code (esp. the html code) many times and tested many examples from different references and this site as well, but it didn't work.

Can you give me some hints where to look in order to solve this problem. You can copy my example code into a txt file and simply run it as html in your browser and you will see the problem. It's only about the bar width before the first tick, after that everything looks as intended. I know that I've got to set the width somehow (normally in css or in the div line), but don't know how to make this work in this special case.

<html>
<body>

<style>
</style>

<script>
ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Time is up!!!!!!!!!`));

function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(bar).style.width = "75%";
      document.getElementById(bar).style.height = "40px";
      document.getElementById(text).textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}
</script>

<div class="row begin-countdown">
  <div class="col-md-12 text-center" >
    <progress value="10" max="10" id="pageBeginCountdown"></progress>
    <p> Time up in <span id="pageBeginCountdownText">10 </span> seconds</p>
  </div>
</div>

</body>
</html

Solution

Add the following lines in your .css file:

progress[10] {
  width: 200px;
}

Modify width with your desired size.

Regards.