lately I was making a speedometer for my FiveM server, the speedometer is connected with jQuery, everything works fine but I'm having a strange issue with the bar on it. Then the vehicle passes half of the speedometer it start to flicker , I know that it's because the half circles I made , 50% visible 50% not , is there any way to fix this ?
.box-float{
position: relative;
right: 5vh;
top: 34vh;
}
.box {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width: 180px;
height: 180px;
transform: rotate(160deg);
border-radius: 50%;
padding: 25px;
background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box2 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
width:170px;
left: 0.4vh;
top: 5;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
.box3 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
left: 0.4vh;
top: 5;
width:170px;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}<div class="box-float relative">
<div class="box-tekstic absolute font-bold"><a class="text-gray-400">0</a>85</div>
<a class="box-tekstic2 absolute font-semibold text-gray-400">KM/H</a>
<div class="box absolute" style="--p:68;"></div>
<div class="box2 absolute" style="--p:68;"></div>
<div class="box3 absolute"></div>
</div>Video