'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>
javascripthtml


Solution 1:[1]

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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CertainPerformance
Solution 2 Shravya

Related Questions