Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears messy. Assistance in resolving this issue would be greatly appreciated.
My current code snippet:
function loadIt() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 80) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}#myElement {
width: 100%;
background: repeating-linear-gradient(to right, green, green 10%, transparent 10%, transparent 12%);
}
#myBar {
width: 0%;
height: 30px;
background: repeating-linear-gradient(to right, grey, grey 10%, transparent 10%, transparent 12%);
}<div id="myElement">
<div id="myBar"></div>
</div>
<br>
<button onclick="loadIt()">Click ON</button>