CODEWITHSUNDEEP
javascripthtml
dram95
dram95

Reputation: 687

Why HTML/JS progress bar stops loading at a certain percentage?

I am trying to make a progress bar. Ignore the styling and inline JS. I only did that so people can just copy and paste 1 file. When the file loads the progress bar accelerates all the way to the end point but the percentage goes up to 20-25% and then it just stops.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
</head>
<body>

    <form name="loading">
        <p>Please Wait, loading...</p>
        <br><br>
        <input type="text" class="progress" name="progress">
        <br><br>
        <input type="text" class="percent" name="percent">
    </form>
    
    <script language="JavaScript">
        var loadingPercent = 0;
        var mark = "||";
        var sum = "||";
        count();

        function count() {
            loadingPercent= loadingPercent+1;            
            sum += sum + mark;
            document.loading.progress.value=sum;
            document.loading.percent.value=loadingPercent+"%";
            if (loadingPercent <99) {
            setTimeout("count()",100);
            }
            else {
            window.location.href = "http://www.amazon.com";
            } }
    </script>


</body>
</html>

Upvotes: 0

Views: 282

Answers (2)

Shravya
Shravya

Reputation: 192

Use the below code it works

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar</title>
</head>

<body>

  <form name="loading">
    <p>Please Wait, loading...</p>
    <br><br>
    <input type="text" class="progress" name="progress">
    <br><br>
    <input type="text" class="percent" name="percent">
  </form>

  <script language="JavaScript">
    var loadingPercent = 0;
    var mark = "||";
    var sum = "||";
    setInterval(() => {
      count()
    }, 100);

    function count() {
      loadingPercent = loadingPercent + 1;
      sum = sum + mark;
      document.loading.progress.value = sum;
      document.loading.percent.value = loadingPercent + "%";
      if (loadingPercent === 100) {
        window.location.href = "http://www.amazon.com";
      }
    }
  </script>


</body>

</html>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370999

sum += sum + mark; means sum = sum + sum + mark;. It will more than double with each iteration - so the initial progress bar will be filled after only a few iterations, far before reaching 100%. Use sum += mark instead.

You should also make the input styled such that the width of the total number of bars at the end properly fills the input, and no more.

You also should pass functions to setTimeout instead of strings.

let loadingPercent = 0;
let sum = '';
const progress = document.querySelector('.progress');
const percent = document.querySelector('.percent');
count();

function count() {
  loadingPercent++;
  sum += '||';
  progress.value = sum;
  percent.value = loadingPercent + "%";
  if (loadingPercent < 99) {
    setTimeout(count, 30);
  } else {
    console.log('done');
  }
}
.progress {
  width: 51em;
  /* or use transform, eg https://stackoverflow.com/a/15879001 */
}
<form name="loading">
  <p>Please Wait, loading...</p>
  <br><br>
  <input type="text" class="progress" name="progress">
  <br><br>
  <input type="text" class="percent" name="percent">
</form>

Upvotes: 2

Related Questions