On click button show dive after time period finish

Refresh

April 2019

Views

29 time

-1

I am wordpress user I have website and its bounce rate is high so I want a loader that will show div onclick button after specific time period finish.

**Note:**when the time period will start its must show a loader in circle to user but the time period should be complete in background.user should not see seconds stuff like that only see a loader.`

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
#myProgress {
  width: 110%;
  float:center;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}
#button{padding:1em;
margin:auto;}
<div id="myProgress">
  <div id="myBar"></div>
</div>
<br> 
<button onclick="move()">Download Movie</button>
<div id="conten"><br>

<p>hello loader is successful</p>

 
</div>

<script src="build/app.js?v=4" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114581422-1"></script>

0 answers