How to make the origin move to a reasonable position through javascript?

I am currently facing a problem. I hope that when the progress value is 10, I can run to the last position of the first segment "progress-bar-1", and when the value is 20, I can run to the last position of the second segment progress-bar-2. But I don't know how to do it reasonably, because there are some gaps in the middle of these three lines, which prevents him from running to the position I want. I hope I can get everyone's help here, thank you.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// The specified position value obtained by dot
var progress = 10;
if(progress == 10){
    progress--
}else if(progress == 20){
    progress-- 
}else if(progress == 30){
    progress--
}
//Calculate where the dot origin should appea
var dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = `calc(${dotPosition}% - 20px)`;

<!-- language: lang-css -->

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#progress-bar-container {
  width: 600px;
  height: 5px;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.progress-bar {
  width: 33.33%;
  height: 10px;
  background-color: #fff;
  margin-right: 8px;
  border-radius: 20px;
}

#progress-bar-1 {
  background-color: #ddd;
}

#progress-bar-2 {
  background-color: #ddd;
}

#progress-bar-3 {
  background-color: #ddd;
  margin-right: 0;
}

#dot {
  width: 20px;
  height: 10px;
  border-radius: 5px;
  background-color: orange;
  position: absolute;
  top: 0px;
  left: 0;
  transition: left 0.2s ease-out;
  overflow: hidden;
}

<!-- language: lang-html -->

<div id="progress-bar-container">
  <div class="progress-bar" id="progress-bar-1"></div>
  <div class="progress-bar" id="progress-bar-2"></div>
  <div class="progress-bar" id="progress-bar-3"></div>
  <div id="dot"></div>
</div>

<!-- end snippet -->

I guess you should give the position to the dot relative to the absolute position of the given progress bar in the screen taken with element.getBoundingClientRect().
So, I imagine I would map the position of the dot to the positions of the progress bars related to a %. For example: if the value is bigger than 33,3% (more than 10) but lesser than 66.6% (less than 20), the position of the dot shoud be in an absolute position between the starting position coordinates of the second progress bar and these same coordinates plus the width of the progress bar.
I hope this raw explanation could be useful.