In this tutorial is presented a script that simulate a loading, displaying a progress bar.
When the loading progress bar is complete (reaches 100%), this script executes a JavaScript function.
You can use this script to show a banner, or any other HTML content, a certain number of seconds, then it displays a "Close" button to remove (hide) that content. Or to perform any other JavaScript instructions when the loading bar reaches 100%.
Besides the JavaScript functions, this script uses CSS styles to set the height, color, and the initial width 0 for the loading progress bar, as you can see in the code of the example below.


To use this script, add the following HTML and JavaScript code into your page, and the CSS code for the graphic styles.

Script to display a loading bar

<div id="loading">Here you add the banner, or any HTML code.<div id="loadbar">&nbsp;</div></div>
<button onclick="simLoad('loadbar');">Click</button>

<script type="text/javascript"><!--
// by - coursesweb.net

var ldsec = 5;           // define the number of secconds till the progress bar reaches 100%
var ldpercent = 5;         // percentage for loading progress bar
var ldspeed = ldsec * 1000 / (100/ldpercent);         // set the speed for progress bar

// data to be displayed in loading bar, when reaches 100%
// a tag that close the block with the content with the loading bar
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Close</u>';      

// define a recursive function to set and add the progress bar
function simLoad(div) {
  // get the object with the ID from "div", the tag which represents the progress bar
  var dvload = document.getElementById(div);
  ldpercent += 5;           // increments the percentage
  if(ldpercent>100) ldpercent = 100;       // ensure that percentages do not exceed 100

  // change the width of the progress bar, and display the percentage
  dvload.style.width = ldpercent+ '%';
  dvload.innerHTML = ldpercent+ '%';

  // if the percentage is less than 100, auto-calls this function
  // else, calls the function finLoad()
  if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
  else finLoad(dvload);
}

// function that can be executed when the progress bar is completed
// receives the object which contains the tag with the loading bar
function finLoad(divobj) {
  /** Here you can add JavaScript instructions to be executed when the progress bar reaches 100% **/

  // adds a close button in the loading bar, to close that block
  divobj.innerHTML = ldtxt;
}

///  simLoad('loadbar')     // to display the loading bar once the page is loaded
--></script>
- You can delete the "Click" button, if you call the simLoad() function in another way.

The CSS code

<style type="text/css"><!--
#loading {
 position:absolute;
 top:20%;
 left:40%;
 width:400px;
 margin:2px auto;
 border:1px solid #01da02;
 padding:3px;
 text-align:center;
}
#loading #loadbar {
 width:0%;
 height:25px;
 background-color:blue;
}
--></style>
First we set the variables that define the number of seconds till the loading bar is complete, a percentage used to define the speed of the progress bar, and a HTML element that will be displayed in the progress bar when it reaches 100%.
Then is created a recursive functions, simLoad() that uses setTimeout() to auto-call itself till the percentage of the progress bar reaches 100. This function increments the width of the HTML element which represents the loading bar, and when it is completed, calls another function that can perform any JavaScript instructions you want to add in it.
See also the comments in code.

  - Example:
In the following example, the simLoad() function is accessed when a button "Click" is pressed, but if you want you can call it when the page is loaded, by deleting the three slashes at the end of the script code.
The number of secconds to complete the whole loading bar are set to 5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial loading bar - coursesweb.net</title>
<style type="text/css"><!--
#loading {
 position:absolute;
 top:20%;
 left:40%;
 width:400px;
 margin:2px auto;
 border:1px solid #01da02;
 padding:3px;
 text-align:center;
}
#loading #loadbar {
 width:0%;
 height:25px;
 background-color:blue;
}
--></style>
</head>
<body>

<div id="loading"><img src="loading_progress.gif" alt="Simulate loading progress" width="340" height="280" /><div id="loadbar">&nbsp;</div></div>
<button onclick="simLoad('loadbar');">Click</button>

<script type="text/javascript"><!--
// by - coursesweb.net

var ldsec = 5;           // define the number of secconds till the progress bar reaches 100%
var ldpercent = 5;         // percentage for loading progress bar
var ldspeed = ldsec * 1000 / (100/ldpercent);         // set the speed for progress bar

// data to be displayed in loading bar, when reaches 100%
// a tag that close the block with the content with the loading bar
var ldtxt = '<u style="cursor:pointer;" onclick="document.getElementById(\'loading\').style.display=\'none\'">Close</u>';      

// define a recursive function to set and add the progress bar
function simLoad(div) {
  // get the object with the ID from "div", the tag which represents the progress bar
  var dvload = document.getElementById(div);
  ldpercent += 5;           // increments the percentage
  if(ldpercent>100) ldpercent = 100;       // ensure that percentages do not exceed 100

  // change the width of the progress bar, and display the percentage
  dvload.style.width = ldpercent+ '%';
  dvload.innerHTML = ldpercent+ '%';

  // if the percentage is less than 100, auto-calls this function
  // else, calls the function finLoad()
  if(ldpercent<100) setTimeout("simLoad('"+div+"')", ldspeed);
  else finLoad(dvload);
}

// function that can be executed when the progress bar is completed
// receives the object which contains the tag with the loading bar
function finLoad(divobj) {
  /** Here you can add JavaScript instructions to be executed when the progress bar reaches 100% **/

  // adds a close button in the loading bar, to close that block
  divobj.innerHTML = ldtxt;
}

///  simLoad('loadbar')     // to display the loading bar once the page is loaded
--></script>

</body>
</html>
- This code will create a web page which shows the following results (click on the "Click" button):
Simulate loading progress
 

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Display / Simulate a Loading Progress Bar

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (31343)
  2. Ajax-PHP File Manager (1891)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (3009)
  4. JavaScript code and PHP (10006)
  5. Remove / Get duplicate array values - Reset array keys in PHP (4522)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (31343)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (25610)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (24612)
  4. Read Excel file data in PHP - PhpExcelReader (23606)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (21427)