Sandro Vardiashvili Sandro Vardiashvili -4 years ago 65
Ajax Question

Display AJAX Loader on page load

hello I'm pretty new at javascript and don't know how to use it.

I want AJAX Loader to appear when a page loads and after loading is finished I want loader to dissapear. Can anyone post me a code for that?

Answer Source

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from to get you started. Then you'll want to place a DIV on your page:

<div id="loading">
    <p><img src="loading.gif" /> Please Wait</p>

You'll want this hidden by default, so you'd need to add this CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
       background-image:url("transparentbg.png"); }

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

function showLoading() {

function hideLoading() {

Now you can use this when you need to do something like querying an external page for data:

$.post("data.php", {var:"foo"}, function(results){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download