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.
<div id='loading'>Here you add the banner, or any HTML code.<div id='loadbar'> </div></div>
<button onclick='simLoad('loadbar');'>Click</button>
<script>
// 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.
<style>
#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%.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#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>
<h4>Example Simulate a Loading Progress Bar</h4>
- Click on this button: <input type='button' onclick="simLoad('loadbar');" value='Click' />
<div id='loading'><img src='javascript/imgs/loading_progress.gif' alt='Simulate loading progress' width='340' height='280' /><div id='loadbar'></div></div>
<script>
// from; 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>
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);