How to use CSS to modify the style like a design draft - css

Question

I encountered a problem. I made a progress bar that will run to the corresponding position according to the value of progress. But I don't quite know how to modify the dot into a pattern like the design draft of the attached drawing, so that it can be wrapped in the progress-bar.
// 假設後端傳來的值是30
var progress = 10;
// 計算小圓點的位置
var dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";
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: 5px;
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: 10px;
height: 10px;
border-radius: 50%;
background-color: orange;
position: absolute;
top: -3px;
left: 0;
transition: left 0.2s ease-out;
}
<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>