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

April 12, 2022

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>

>Solution :

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>