CODEWITHSUNDEEP
javascriptajax
Sandro Vardiashvili
Sandro Vardiashvili

Reputation: 65

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?

Upvotes: 4

Views: 26372

Answers (4)

Timur Gafforov
Timur Gafforov

Reputation: 761

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

Upvotes: 1

mgraph
mgraph

Reputation: 15338

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

Upvotes: 0

Frankline
Frankline

Reputation: 41005

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

Upvotes: 12

Sapan Diwakar
Sapan Diwakar

Reputation: 10946

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.

Upvotes: 0

Related Questions