Make progress bar disappear once complete with progress count

Question

He everyone.

I need you expertise to make my progress bar disappear so that the contents position comes back to top again once the line reaches 100% and also display number count of progress.

could someone help me out? thanks

here is my css

#myProgress {
   margin-top:20%;
  width: 100%;
  background-color: #ddd;
}

#myBar {

  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}

html

<div id="myProgress">
<h1>Searching for best online fare...</h1>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
<div id="content">  
test
</div>

Js

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

Thanks in advance

Answer 1

try this

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
      document.getElementById('myProgress').style.display='none'
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myProgress {
   margin-top:20%;
  width: 100%;
  background-color: #ddd;
}

#myBar {

  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}

<div id="myProgress">
<h1>Searching for best online fare...</h1>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
<div id="content">  
test
</div>