//Javascript source (jQuery required)----------------------->>>
//call this before ajax transaction
function setLoadingAnm(){
$("#your_id").after("<div class=\"your_loading_img_class\"></div>");
$("#your_id").after("<div class=\"your_loading_bg_class\"></div>");
var pos = $("#your_id").position();
var gridW = $("#your_id").width() + 23;
var gridH = $("#your_id").height() + 20;
$(".your_loading_bg_class").css({left:pos.left, top:pos.top, width:gridW, height:gridH});
var centerW = (pos.left * 2 + gridW)/2 -30;
var centerH = (pos.top * 2 + gridH)/2 -27;
$(".your_loading_img_class").css("left",centerW);
$(".your_loading_img_class").css("top",centerH);
}
//call this after ajax transaction
function removeLoadingAnm(){
$(".your_loading_img_class").remove();
$(".your_loading_bg_class").remove();
}
//usage exapmle
function yourFunction(){
setLoadingAnm();
$.ajax({
//bla bla bla...
});
removeLoadingAnm();
}
/*CSS------------------------>>>*/
.your_loading_img_class{
background: url(images/loading.gif);
height: auto;
width: auto;
position: absolute;
z-index: 1001;
display: block;
}
.your_loading_bg_class{
background: #0000FF;
height: auto;
width: auto;
position: absolute;
z-index: 1000;
display: block;
opacity: 0.10;/*all with CSS3 compatibility*/
filter: alpha(opacity=10);/*Netscape*/
-ms-filter: alpha(opacity=10);/*IE*/
}
your_id: the area covered with the loading animation
your_loading_img_class: you need to define background image with css for this class
your_loading_bg_class: you need to define background color with css for this class
your_loading_img_class: you need to define background image with css for this class
your_loading_bg_class: you need to define background color with css for this class
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.