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.

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">
<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">
<style type="text/css">
  #loading { 
     position: absolute; 
     top: 35%; 
     left: 45%;  
     font-style: italic; 
     font-family: Verdana;
  //Style setting for "Now Loading..." characters.
<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 =;
   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() { = "none";
     document.getElementById("doc").style.visibility = "visible";
//Making new page #doc visible after loaded. 
// -->
  <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.

Related articles

[JS learning series] How to make slot machine by JavaScript
Let's  make three digits slot machine only with JavaScript.
How to change background images randomly in JavaScript [with sample code]
JavaScript sample code to change background images randomly in your web site.
JavaScript Learning Series - Web Landing Page with Flying balloons -