Open Page after Progressbar reaches 100%

Question

Open Page after Progressbar reaches 100%

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I would like a help, I have a button that when pressed triggers the event of progressbar and it begins to load 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 carregamento

asked by anonymous 04.09.2018 / 15:21

2 answers

Adapt code to return mouse position Sending form with ajax json

score 0 · Answer 1

If I understand correctly you only use the command window.open() within if (width >= 100) by passing the url of your page inside it and how 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 object window :

link

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>

score 0 · Answer 2

The most difficult part is to make the progress bar you've done, 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 url you want

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

Applying any of the examples above

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 + '%'; 
      }
   }
}