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?

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?

• javascript
• ajax

• What is loading? What do you mean by an AJAX loader? – Jivings Commented Feb 9, 2012 at 8:52
• AJAX loading bar ajaxload.info – Sandro Vardiashvili Commented Feb 9, 2012 at 8:53
• The main idea is that you put for example a hidden animated gif to the page. When the ajax request starts you show the image, and when it finishes you hide image again... Try this way... There is many answers already to similar questions.. Look at that one for example.... – PrimosK Commented Feb 9, 2012 at 8:59
• Possible duplicate... – PrimosK Commented Feb 9, 2012 at 9:10

4 Answers 4

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 http://www.ajaxload.info/ 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>
</div>

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() {
    $("#loading").show();
}

function hideLoading() {
    $("#loading").hide();
}

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

showLoading();
$.post("data.php", {var:"foo"}, function(results){
    $("content").append(results);
    hideLoading();
});

https://preloaders.net/en/ajax_loader_script here you can find full description along with the loader animations in GIF, SVG and even APNG format

You can display an image, e.g. this, as soon as you make the Ajax call and then hide the image when you get the response from the ajax call.

html:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

javascript:

$(function() {
    $(".changepass").click(function() {
        $("#dvloader").show();
        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
        return false;
    });
});