How to make “Now Loading….” page on JavaScript

You might see “Now Loading….” page when you browse some websites.

Let’s make the “Now Loading… Wait for few seconds until our new page will be shown up.” page by simple JavaScript.

Contents

What you can make
JS codes of “Now Loading….” page
Related articles

What you can make

Please see the small video below to know how the code works.

JS codes of “Now Loading….” page

Here is the source code and description.

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
  <!--
  #loading { 
     position: absolute; 
     top: 35%; 
     left: 45%;  
     font-style: italic; 
     font-family: Verdana;
   }
  //Style setting for "Now Loading..." characters.
  -->
</style>
<script type="text/javascript">
<!--
   document.write('<style type="text/css">#doc { visibility: hidden; }<\/style>');
// Set visibility of #doc(contents of new web page) hidden during displaying "Now Loading".
   document.write('<div id="loading">Now Loading...<\/div>');
// Displaying Now Loading... characters.

   var i = 0;
   var ele = document.getElementById("loading"); //Get "Now Loading..." text.
   var str = ele.firstChild.data;
   function char_loop(ele, str){
     ele.innerHTML = str.substring(0, i++ % str.length + 1);
//Get characters of "Now Loading..." one by one following the remainder left over of "i++ / (str.length +1)".
     }
   setInterval("char_loop(ele, str);", 200);
// Repeating Loop char_loop() till the page loading will be done.
//

   window.onload = function() { 
     ele.style.display = "none";
     document.getElementById("doc").style.visibility = "visible";
//Making new page #doc visible after loaded. 
   }
// -->
</script>
</head>
<body>
  <div id="doc">
    <img src="C:\Users\mario\Desktop\test\images\2013-03-29 10.06.13_preview.jpeg" width="100%" height="auto"/>
.
.
.
.
//Contents of new page after loaded.
   </div>
</body>
</html>