<div class="wrapper">
  <div class="progress"></div>
</div>
<button class="next">Next</button>

body {
  background-color: grey;
}
div {
  position: relative;
  width: 100%;
}
.progress {
    left: 0;
    background-color: white;
    position: absolute;
    top: 50%;
    height: 4px;
    width: 0%;   //вот эту ширину, изначально 0% в начальной точке
    transform: translateY(-50%);
    z-index: -1;
    transition: 0.5s all;
}

button {
  margin-top: 20px;
}

const next = document.querySelector('.next'),
      wrapper = document.querySelector('.wrapper'),
      progress = document.querySelector('.progress');
next.addEventListener('click', (e) => {
  e.preventDefault();
  let a = wrapper.offsetWidth,
      b = progress.offsetWidth;
    update(a, b);
});

function update (a, b) {
    const percent = Math.floor((33 * a) / 100);
    let width = (b + percent);
  if (width >= a) {
    width = 0;
  };
    progress.style.width = `${width}`+'px';
};