Как кодировать индикатор выполнения с пробелами с помощью HTML CSS и JavaScript

Question

У меня есть этот код ниже.Но после запуска вы увидите, что при запуске анимации возникает проблема.Я хочу, чтобы это выглядело красиво: сначала раскрасить часть процентов, затем другую и так далее до 80%.Но теперь, как вы видите, это беспорядок.Пожалуйста, помогите мне с этим.

мой код:

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> 

Answer 1

Беспорядок был вызван шириной, рассчитанной в процентах от переменной ширины, заданной также в процентах. Оставьте стандартное правило CSS для внешнего div в px и измените только внутренний div с процентами

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, grey, grey 10px, 
transparent 10px, transparent 15px);
}

#myBar {
  width: 0%;
  height: 30px;
  background: repeating-linear-gradient(to right, green, green 10px, 
transparent 10px, transparent 15px);
}

<div id="myElement">
  <div id="myBar"></div>
</div>

<br>
<button onclick="loadIt()">Click ON</button>