Display AJAX Loader on page load

Question

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?

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](http://stackoverflow.com/a/1305304/617996) one for example.... — PrimosK, Feb 09 '12 at 08:59
Possible [duplicate](http://stackoverflow.com/q/1305260/617996)... — PrimosK, Feb 09 '12 at 09:10

score 12 · Accepted Answer · answered Feb 09 '12 at 08:54

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();
});

score 1 · Answer 2 · answered Mar 23 '17 at 08:27

1

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

answered Mar 23 '17 at 08:27

Timur Gafforov

771
3
10
28

score 0 · Answer 3 · answered Feb 09 '12 at 08:53

0

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.

answered Feb 09 '12 at 08:53

Sapan Diwakar

10,480
6
33
43

score 0 · Answer 4 · answered Feb 09 '12 at 08:55

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;
    });
});

Display AJAX Loader on page load

4 Answers4

Linked