Make progress bar disappear once complete with progress count-CodePudding

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>

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

CodePudding user response：

Inside your if(width >= 100) you can do elem.style.display = 'none'

For the progress text inside the progress bar you can do elem.innerHTML = width "%";

Demo

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
      elem.style.display = 'none'
      document.querySelector("#myProgress h1").style.display = 'none';
      document.getElementById('content').style.display = 'block';

    } else {
      width  ;
      elem.innerHTML = 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

CodePudding user response：

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>

CodePudding user response：

Change your js to:

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