Center check mark on progress bar - html

Question

I am making a progress bar with a checkmark after 30% of the progress bar with flexbox.
I divided the bar into 3 parts, one with an orange background, then the checkmark then the red background.
The problem is that the dot (checkmark) doesn't come exactly after 30%, I need to align it in the center between the orange and red background.
.progress-container {
display: flex;
background: gray;
height: 20px;
width: 500px;
border-radius: 20px;
position: relative;
}
.threshold {
background: orange;
width: 30%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.dot {
position: absolute;
left: 30%;
margin-top: -5px;
width: 24px;
height: 24px;
text-align: center;
border: 4px solid green;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dot:after {
content: "✔";
color: green;
font-weight: bold;
font-size: 18px;
}
.completed {
flex: 1;
background: red;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<div class="progress-container">
<div class="threshold">
</div>
<div class="dot">
</div>
<div class="completed">
</div>
</div>

Answer 1

you need to push your div.dot 50% to the left to make the starting point of div as a center of a checkmark.
transform: translateX(-50%)
.progress-container {
display: flex;
background: gray;
height: 20px;
width: 500px;
border-radius: 20px;
position: relative;
}
.threshold {
background: orange;
width: 30%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.dot {
position: absolute;
left: 30%;
margin-top: -5px;
width: 24px;
height: 24px;
text-align: center;
border: 4px solid green;
background: #f8f8f8;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dot:after {
content: "✔";
color: green;
font-weight: bold;
font-size: 18px;
}
.completed {
flex: 1;
background: red;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<div class="progress-container">
<div class="threshold">
</div>
<div class="dot">
</div>
<div class="completed">
</div>
</div>

Answer 2

Use transform: translate(-50%).
Essentially, the problem is that (because you use the 'left' property), your .dot div is being positioned by its left edge, while you want it to be positioned according to its center. One way to solve this is to simply shift your div to the left by half its width, thereby placing its center where its left edge used to be. This can be done by passing '-50%' to translate, shifting the element to the left by 50% of the element's width.
Your example, modified:
.progress-container {
display: flex;
background: gray;
height: 20px;
width: 500px;
border-radius: 20px;
position: relative;
}
.threshold {
background: orange;
width: 30%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.dot {
transform: translate(-50%); /* Add this to offset the checkmark */
position: absolute;
left: 30%;
margin-top: -5px;
width: 24px;
height: 24px;
text-align: center;
border: 4px solid green;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dot:after {
content: "✔";
color: green;
font-weight: bold;
font-size: 18px;
}
.completed {
flex: 1;
background: red;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<div class="progress-container">
<div class="threshold">
</div>
<div class="dot">
</div>
<div class="completed">
</div>
</div>