Open Page after Progressbar reaches 100%

Asked

Viewed 288 times

1

Hello I would like a help, I have a button that when pressed triggers the event of progressbar and it starts loading up to 100%, after that I would like to open a page (for example thanks). HTML and Script are just below;

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

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>ProgressBar com JavaScript </h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Finalizar</button>

javascript loading

  • You have already done the check when it reaches 100, just open the window there. What was the difficulty?

2 answers

0

If I understand correctly, just use the command window.open() within the if (width >= 100) passing within it the url of your page and the way it will open:

window.open("https://previews.123rf.com/images/aliasching/aliasching1411/aliasching141100033/33389018-congratulations-typography-lettering-decorative-text-card-design.jpg","_self");// url de uma imagem "congratulations" que você poderá substituir pela sua página de agradecimentos.

If you want to know more about the method open of the object window:

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Follow the example:

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      window.open("https://previews.123rf.com/images/aliasching/aliasching1411/aliasching141100033/33389018-congratulations-typography-lettering-decorative-text-card-design.jpg","_self")
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>ProgressBar com JavaScript </h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Finalizar</button>

  • great understood, but done this already with php all right she would already send the form?

  • ai you will have to give a redirect in php, you did not quote this detail rsrs

  • All right thanks there bro, I got it

0

The hardest part is to make the bar Progress you have ever made, now just open your url:

Redirect your current page to the desired url

//Altere para a url desejada
window.location.href = 'https://www.google.com';

Open a new tab in the browser with the desired url

//Altere para a url desejada
window.open('https://www.google.com');

Applying in your code any of the above examples

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

    function frame() {
      if (width >= 100) {
          clearInterval(id);

          //Altere para a url desejada
          window.location.href = 'https://www.google.com';
      } else {
          width++; 
          elem.style.width = width + '%'; 
      }
   }
}

Browser other questions tagged javascript loading

You are not signed in. Login or sign up in order to post.