Sunday, February 6, 2011

Pleae wait


http://stackoverflow.com/questions/1964839/jquery-please-waiting-loading-animation
7down voteacceptedGenerally 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();});

No comments:

Post a Comment