Cool AJAX Page Loading Effects

by 5 years ago

Loading..

It’s a cool page loading effects I ever seen. Page loading effects makes visitors to think about the coolness of the website. It’s really annoying to waiting for to complete page loading, So if your serve complete web page once it put good impression on your visitors.
In this tutorial I am going to give my best trick to add a cool AJAX Page Loading effect. Just you have to copy paste some codes.
You can see the page loading effect in the my website by just clicking on the below demo button.  

Add Page Loading Animation Effect


Step 1: Add jQuery Library to your web page header section.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

jQuery is need for the animation effect. It consist predefined methods.

Step2 : Add HTML code to body

Add the Following Code  just after(below) your web page <body> tag


<div id=’loading’><div id=’progress-bar’></div><div id=’loader’>Loading…</div></div>


“Loading…” will display as alternative of animation.
Don’t think too much about it, just copy and paste it.

Step 3: CSS coding to design template

Put the following code in your CSS section. If you are using external .css file for your web page you can put it into your CSS file .


#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #3c5a76 url(http://dl.dropbox.com/u/13256471/fuzionpro/109.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.v2 #loading { display: none; }

#progress-bar {
position: absolute;
top: 0; left: 0;
background: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
#loader {
background: url(http://dl.dropbox.com/u/13256471/fuzionpro/fuzionpro.png) no-repeat center 25%;
height: 100%;
display: block;
}


Step 4: Put this magic code to your head section.

The complete effect or animation will handle by the use of the following jQuery code. Put it to your <head> tag.


<script>

(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script>



Hope you enjoyed it. Leave comment if you face any problem while implementation.

Comments

Load More