Page Preloader With Progress Bar Using JQuery

Hi Guys, today we will see how to create a simple web page preloader with progress bar using jQuery. It really matters how your website pages load and are presented to users. A slow loading website has more chances to lose visitors and readers. No one wants to see your page elements half loaded and wait till all the element loads, so you would have seen many websites which are using preloaders. With the help of preloader you can force your page to be displayed once it’s all assets/elements have been loaded, so users see the complete website/page when it loads. It’s a great trick to offer a good user experience. We have used a little bit of jQuery code and CSS to build this super simple yet effective preloader.

preloader infotuts

    Demo 1     Demo 2

                                         

Let’s see how you can build one for your website. It’s just bunch of JQuery and CSS code you need to insert in proper section of your website. If you have a WP website then you can add the code in Header.php. Let’s see the code for our demo 1. We have two sets of jQuery code one that needs to added in head section of page and add another one in Footer area i.e. before closing </body> tag.

Add the code given below inside <head> section of the page:

</p>
<script type="text/javascript">
 jQuery(document).ready(function(){
jQuery("body").hide();

jQuery("body").before("<div id='loadingdiv'></div>");
});
</script>
<p style="text-align: justify;">

Then you need to add the jQuery code given below at the bottom of page:

</p>
<script type="text/javascript">
 jQuery(document).ready(function(){
var per=0;
var progressbar = setInterval(function(){
var children = document.body.children;

var pernce = (100/children.length);
pernce = Math.ceil(pernce);
var not_tag_present = false;

for(var i=0; i<children.length; i++) {
 var innerchilds = jQuery(children[i]).children();
 if(innerchilds.length>0){
 var innerpercen = pernce/innerchilds.length;
 innerpercen = Math.ceil(innerpercen);
 for(var j=0;j<innerchilds.length;j++){
 per = per + innerpercen;
 if(jQuery(innerchilds[j]).length>0){

 if(!not_tag_present){
 if(jQuery("#loadingdiv").width()>=jQuery(window).width()){

 clearInterval(progressbar);
 jQuery("#loadingdiv").hide();
 jQuery("body").show();

 }else{
 jQuery("#loadingdiv").animate({width:per+"%"},{duration:100,specialEasing:{width:'linear'},complete: function(){
 if(jQuery("#loadingdiv").width()>=jQuery(window).width()){
 clearInterval(progressbar);
 jQuery("#loadingdiv").hide();
 jQuery("body").show();

}

 }

 });

 }
 }
 not_tag_present = false;
 }
 else{
 setTimeout(function(){
 j--;
 not_tag_present = true;

 },1000);
 }
 }
 }
 else{
 if(jQuery(children[i]).length>0){
 per = per + pernce;
 if(!not_tag_present){
 if(jQuery("#loadingdiv").width()>=jQuery(window).width()){
 clearInterval(progressbar);
 jQuery("#loadingdiv").hide();
 jQuery("body").show();

}else
 {
 jQuery("#loadingdiv").animate({width:per+"%"},{duration:700,specialEasing:{width:'linear'},complete: function(){
 if(jQuery("#loadingdiv").width()>=jQuery(window).width()){
 clearInterval(progressbar);
 jQuery("#loadingdiv").hide();
 jQuery("body").show();

}

}
 });
 }

 }
 not_tag_present = false;
 }
 else{
 setTimeout(function(){
 i--;
 not_tag_present = true;

 },1000);
 }
 }

 }

},1000);
});
</script>
<p style="text-align: justify;">

A little bit of CSS code to style the loading div progress bar:

</p>
#loadingdiv{
 width:0px;
 background:red;
 height:2px;
 }
<p style="text-align: justify;">

Now you know how simple it is to get an awesome and simple preloader in your website. You can download our demo file and see it in action in your local machine as well. Feel free to use the code in your projects. If you think this tutorial is helpful then please consider sharing it with your friends and yes we would love to be your friend on Google plus and Facebook :) Also let us know your thoughts on this.

About sanjeev

sanjeev
Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

One thought on “Page Preloader With Progress Bar Using JQuery

Comments are closed.