changing the width of a div with setinterval

I have this code with css animation:

<div class="box">
  <div class="line"></div>
</div>

 <style>
@keyframes progress-bar {
  0% {
    width: 0;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

  .box {
    position: relative;
    height: 3px;
    margin-top: 20px;
    background: transparent;
  }
  .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: red;
    -webkit-animation: progress-bar 6s ease-in infinite alternate forwards;
    animation: progress-bar 6s ease-in infinite alternate forwards;
  }
</style>

This is an example link to codesandbox: link

This allows me to fill in endlessly div.line in three seconds and then hide it’s width back in three seconds.

I want to implement in Vanila JS the same functionality with using setInterval. I understand that I need to use setInterval, loop and get the width using the clientwidth. But all my attempts either immediately clear setInterval or doesn’t work.
Please help me find the optimal solution, thank you.