I am working on developing an online game that features different items. However, I am facing a challenge with the images of these items blinking when the percentage value is updated. How can I resolve this issue?
Is there an alternative approach I could take by making changes to my HTML and CSS code?
Problem:
https://i.sstatic.net/TNKRA.gif
var percent = 0;
var countdown = setInterval(function () {
percent++;
$(".food_container > div").each(function(index, element) {
if(percent == 100){ clearInterval(countdown) }
$(element).css({"--value": percent + "%"}).attr("data-value",percent + "%");
});
}, 1000);body{
background-image: linear-gradient(to bottom, #35C10D, #6FE814);
background-repeat: no-repeat;
height: 100vh;
font-family: 'Arial', sans-serif;
}
.food_container{
display: flex;
gap: 30px;
}
.food_container > div {
background-image: var(--image-url);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
position: relative;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
}
.food_container > div:before {
content: attr(data-value);
display: flex;
justify-content: center;
font-size: 9pt;
align-items: end;
position: absolute;
bottom: -20px;
left: 0;
color: #fff;
right: 0;
height: calc(var(--value) + 20px);
width: 100%;
transition: .3s ease;
box-shadow: 0 -7px 22px -7px rgb(255 255 255 / 12%), 0 -7px 5px -7px white;
border-top: 1px solid rgb(255 255 255 / 58%);
background-image: var(--image-url);
background-size: 60px;
background-position: center bottom 20px;
background-repeat: no-repeat;
filter: grayscale(1) brightness(1.2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="food_container">
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrP.svg);" data-value="0%"></div>
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrm.svg);" data-value="0%"></div>
<div style="--value: 0%;--image-url: url(https://svgur.com/i/hrQ.svg);" data-value="0%"></div>
</div>