Recently in my current project there was a requirement of client to add Percentage Loader while the components of site is loading.
I thought of writing this function to add Percentage Loader .
Step1: HTML part -
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<div id="containerdd">
// all page data
</div>
</body>
</html>
Step2: Add CSS -
<style>
docFile{width:32.2%;}
#overlay{position:fixed; z-index:99999; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.9); transition: 1s 0.4s;}
#progress{height:1px; background:#fff; position:absolute; width:0; top:50%;}
#progstat{font-size:0.7em; letter-spacing: 3px; position:absolute; top:50%; margin-top:-40px; width:100%; text-align:center; color:#fff;}
</style>
Step3: Write Script-
<script>
;(function(){
function id(v){return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
docFile = document.images,
c = 0;
tot = docFile.length;
function documentLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tDocumentData = new Image();
tDocumentData.onload = documentLoaded;
tDocumentData.onerror = documentLoaded;
tDocumentData.src = docFile[i].src;
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);
}());
</script>
Step4- Save and Publish .