simulate progress bar

by Joe Saad

HTML

<button onclick="playNpause()">play and pause</button>

<div id="progress-place">
  <div id="progress" style="width:0"></div>
</div>

CSS

#progress-place{
  border: 1px solid black;
  height: 10px;
  border-radius: 4px;
  width: 300px;
}


#progress{
  background: red;
  height: 10px;
  /*transition: background-color 0.5s ease; */
  transition: width 1s
}

JavaScript

let p = false;
let q = 0;
let progress = document.getElementById('progress')

function playNpause() {
  p = !p;
}

setInterval(() => {
  if (p && parseInt(progress.style.width) < 300) {
    q += 1;
    console.log(q)
    console.log('-',parseInt(progress.style.width))
    
    progress.style.width = q*100+'px';
  }

}, 1000)