I am currently struggling with a challenge. My goal is to make the dot on the progress bar reach specific positions when the value is 10 or 20. However, I am facing difficulties in achieving this due to gaps between the segments of the progress bar. I would greatly appreciate any help or advice on how to overcome this obstacle. Thank you.
// To determine dot position based on progress value
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)`;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;
}<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>