Handy Javascript Code:
Here we will start with the header
And now we start with the style of the page, call this loading.css
Now the Javascript code call this loading.js
Now to do the rest of the code
and last of all the loading image.
Included is the script. for more handy codes visit HERE.
Here we will start with the header
Code:
<style type="text/css">
<!--
.subtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
color: #00A5E9;
text-decoration: none;
}
.subsectiontitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
color: #00A5E9;
text-decoration: none;
}
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #333333;
text-decoration: none;
}
.anchor {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #4778BD;
text-decoration: none;
}
.style1 {font-size: 12px; font-style: normal; color: #333333; text-decoration: none; font-family: Arial, Helvetica, sans-serif;}
-->
</style>
Code:
html, body {
margin:0px;
padding:0px;
overflow:auto;
height:100%;
}
#loading-mask{
top:0px;left:0px;
width:100%;
height:100%;
background:#c3daf9;
position:absolute;
z-index:20000;
}
#loading{
position:absolute;
left:45%;
top:40%;
border:1px solid #6593cf;
padding:2px;
background:#c3daf9;
width:150px;
text-align:center;
z-index:20001;
}
#loading .loading-indicator{
border:1px solid #a3bad9;
background:white url(load-bg.gif) repeat-x;
color:#003366;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
text-align:left;
}
Code:
var LoaderInstance=function(){var rtnObj={},timer=100;function _addEvent(obj,evt,fnt,args){if(obj.addEventListener){obj.addEventListener(evt,function(){fnt.call(this,args);},false);}else if(window.attachEvent){obj.attachEvent('on'+evt,function(){fnt.call(this,args);});}else{obj['on'+evt]=function(){fnt.call(this,args);};}};function _closeLoader(elemName){var elem,elemArr=[],op=100,opF=1,stl,ua=navigator.userAgent.toLowerCase(),isIE=(ua.indexOf('opera')==-1&&ua.indexOf('msie')>-1);function _setStyle(elem,stl,key,val){for(var i=0;i<key.length;i++){if(isIE){stl[key[i]]=val[i];}else{stl=(stl)?stl+key[i]+':'+val[i]+';':key[i]+':'+val[i]+';';}}return stl;};function _transform(){var stl,elemBody;for(var i=0;i<elemArr.length;i++){stl=_setStyle(elemArr[i].elemObj,elemArr[i].elemStl,['filter','opacity','-moz-opacity'],['alpha(opacity='+op+')',opF,opF]);elemArr[i].elemObj.setAttribute('style',stl,true);}if(op>0){op-=10;opF='.'+(op/10)%100;setTimeout(function(){_transform();},timer);}else{for(var i=0;i<elemArr.length;i++){elemArr[i].elemObj.parentNode.removeChild(elemArr[i].elemObj);}}};for(var i=0;i<elemName.length;i++){elem=document.getElementById(elemName[i]);if(elem){stl=elem.getAttribute('style',true);elemArr=elemArr.concat({elemObj:elem,elemStl:stl});}}if(elemArr.length>0){_transform();}};rtnObj.closeLoader=_closeLoader;_addEvent(window,'load',function(){rtnObj.closeLoader(['loading-mask','loading']);});return rtnObj;}();
Code:
<link rel="stylesheet" type="text/css" href="loading.css" />
</head>
<body>
<div id="loading-mask"> </div>
<div id="loading">
<div class="loading-indicator"><img src="loading.gif" style="width:16px;height:16px;" align="absmiddle" alt="" /> <Loading Message here.> </div>
</div>
<script type="text/javascript" src="loading.js"></script>
</head><body><?php include(yourfile.php); // please note iframes will screw up on this.<br />
<br />
<br />
?>
<br />
<br />
Text here if you dont want to use php include.
</body>Included is the script. for more handy codes visit HERE.
