Create a simple loading bar using Javascript

Posted on | Edited on

This article is about how to create a simple loading bar. Actually, the loading progress of a page could be got. But in this article, I only use a simple way to implement the loading bar.

Prepare

First, create a html file. Like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Js loading bar</title>
  </head>
  <body>
    <div id="progress-container">
      <div class="progress-bar" id="progress-bar">

      </div>
    </div>
  </body>
</html>

Then add some CSS inhead section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#progress-container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
.progress-bar{
  position: absolute;
  width: 0;
  top: 0;
  left: 0;
  bottom: 0;
  background: #d43f3a;
}
</style>

Now the whole html file looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Js loading bar</title>
    <style>
      #progress-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
      }
      .progress-bar{
        position: absolute;
        width: 10%;
        top: 0;
        left: 0;
        bottom: 0;
        background: #d43f3a;
      }
    </style>
  </head>
  <body>
    <div id="progress-container">
      <div class="progress-bar" id="progress-bar">

      </div>
    </div>
  </body>
</html>

Create Javascript function

Now, we need to add some Javascript function just under the progress container. As after rendering the progress-container, the broswer will run the javascript file before rendering any other elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
  (function(){
  // get the progress container, will be used later
  var progressContainer = document.getElementById('progress-container');

  // get the progress bar, will be used later
  var progressBar = document.getElementById('progress-bar');

  // set the default progress to 1;
  var progress = 0;

  // loaded is used to show the page loading status;
  window.loaded = false;

  // change the status when finish loading
  window.onload = function(){
    window.loaded = true;
  }

  // genrate a random number within a given range
  function random(min, max){
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  // set progress bar width
  function setProgress(progressBar, progress){
    progressBar.style.width = progress + '%';
  }

  // hide progress bar after a given time
  function hide(progressContainer, time){
    setTimeout(function(){
      progressContainer.parentNode.removeChild(progressContainer);
    },time);	
  }

  // show the loading bar
  function show(){

    setTimeout(function(){
      // first check the loading status
      if(window.loaded){
        // set the progress to 100
        setProgress(progressBar, 100);

        // hide progress bar container after 1 second;
        hide(progressContainer, 1000);

        return;
      }

      // increase the progress
      progress += random(1,5);

      // if progress is greater than 98 but the page is still loading, set the progress to a fixed number, 98
      if(progress > 98)
      {
        progress = 98;
      }

      setProgress(progressBar, progress);

      show();
    },random(10,30));
  }
  show();
})();
</script>

Testing

Now add some iframe to the html page for testing purpose

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Js loading bar</title>
    <style>
      #progress-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
      }
      .progress-bar{
        position: absolute;
        width: 10%;
        top: 0;
        left: 0;
        bottom: 0;
        background: #d43f3a;
      }
    </style>
  </head>
  <body>
    <div id="progress-container">
      <div class="progress-bar" id="progress-bar">

      </div>
    </div>
    <script>
      (function(){
        // get the progress container, will be used later
        var progressContainer = document.getElementById('progress-container');

        // get the progress bar, will be used later
        var progressBar = document.getElementById('progress-bar');

        // set the default progress to 1;
        var progress = 0;

        // loaded is used to show the page loading status;
        window.loaded = false;

        // change the status when finish loading
        window.onload = function(){
          window.loaded = true;
        }

        // genrate a random number within a given range
        function random(min, max){
          return Math.floor(Math.random() * (max - min + 1) + min);
        }

        // set progress bar width
        function setProgress(progressBar, progress){
          progressBar.style.width = progress + '%';
        }

        // remove progress bar after a given time
        function remove(progressContainer, time){
          setTimeout(function(){
            progressContainer.parentNode.removeChild(progressContainer);
          },time);	
        }

        // show the loading bar
        function show(){

          setTimeout(function(){
            // first check the loading status
            if(window.loaded){
              // set the progress to 100
              setProgress(progressBar, 100);

              // remove progress bar container after 1 second;
              remove(progressContainer, 1000);
              return;
            }

            // increase the progress
            progress += random(1,5);

            // if progress is greater than 98 but the page is still loading, set the progress to a fixed number, 98
            if(progress > 98)
            {
              progress = 98;
            }

            setProgress(progressBar, progress);

            show();
          },random(10,30));
        }
        show();
      })();
    </script>
    <iframe src="https://www.w3schools.com"></iframe>
    <iframe src="https://www.w3schools.com"></iframe>
    <iframe src="https://www.w3schools.com"></iframe>
    <iframe src="https://www.w3schools.com"></iframe>
</body>
</html>

See the Pen GEqvxv by YI YANG (@yanniyiyi) on CodePen.