индикатор загрузки с иконкой в ​​виде указателя

Question

Поэтому я пытаюсь создать этот динамический индикатор выполнения для отображения определенных значений, единственная проблема, с которой я сталкиваюсь, заключается в том, что значок не является точным, он переполняется как справа, так и слева. изображение ясно, проблема в значке в красном круге. заранее спасибо за помощь

Это часть CSS:

  <style type="text/css">
 .bar-step {
  position:absolute;
  margin-top:-100px;
  z-index:1;}
.ruler {
position: relative;
width: 100%;
margin: 0px;
height: 24px;
}
.ruler .cm,
.ruler .mm {
position: absolute;
border-left: 1px solid #555;
height: 24px;
width: 10%;
}
.ruler .cm:after {
position: absolute;
bottom: -25px;
font: 17px/0.1 sans-serif;
}
.ruler .mm {
height: 15px;
}
.ruler .mm:nth-of-type(5) {
height: 20px;
}
.ruler .cm:nth-of-type(1) {
left: 0%;
}
.ruler .cm:nth-of-type(1):after {
content: "0";
left: -10%;
}
.ruler .cm:nth-of-type(2) {
left: 10%;
}
.ruler .cm:nth-of-type(2):after {
content: "<?php echo $obj*0.1;  ?>";
left: -35%;
}
.ruler .cm:nth-of-type(3) {
left: 20%;
}
.ruler .cm:nth-of-type(3):after {
content: "<?php echo $obj*0.2;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(4) {
left: 30%;
}
.ruler .cm:nth-of-type(4):after {
content: "<?php echo $obj*0.3;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(5) {
left: 40%;
}
.ruler .cm:nth-of-type(5):after {
content: "<?php echo $obj*0.4;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(6) {
left: 50%;
}
.ruler .cm:nth-of-type(6):after {
content: "<?php echo $obj*0.5;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(7) {
left: 60%;
}
.ruler .cm:nth-of-type(7):after {
content: "<?php echo $obj*0.6;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(8) {
left: 70%;
}
.ruler .cm:nth-of-type(8):after {
content: "<?php echo $obj*0.7;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(9) {
left: 80%;
}
.ruler .cm:nth-of-type(9):after {
content: "<?php echo $obj*0.8;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(10) {
left: 90%;
}
.ruler .cm:nth-of-type(10):after {
content: "<?php echo $obj*0.9;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(11) {
left: 100%;
}
.ruler .cm:nth-of-type(11):after {
content: "<?php echo $obj;  ?>";left: -25%;
}
.ruler .mm:nth-of-type(1) {
left: 10%;
}
.ruler .mm:nth-of-type(2) {
left: 20%;
}
.ruler .mm:nth-of-type(3) {
left: 30%;
}
.ruler .mm:nth-of-type(4) {
left: 40%;
}
.ruler .mm:nth-of-type(5) {
left: 50%;
}
.ruler .mm:nth-of-type(6) {
left: 60%;
}
.ruler .mm:nth-of-type(7) {
left: 70%;
}
.ruler .mm:nth-of-type(8) {
left: 80%;
}
.ruler .mm:nth-of-type(9) {
left: 90%;
}
.ruler .mm:nth-of-type(10) {
left: 100%;
}
</style> 

Это JS, где я перемещаю значок:

<script>
document.getElementById("pointerRealise").style.width = <?php echo json_encode(number_format($realEnPrct*100 ,2) ."%"); ?>;
document.getElementById("pointerCible").style.left = <?php echo json_encode(number_format($cibEnPRct*100 ,2) ."%"); ?>;
</script>