How to show loading icon while processing ?

Surya Kant

Hii all;

I am not using ajax call simply i am calling a java script method not developed by me,

That means that java script method developed by some one else and i don't know what are the process what he doing inside this method.

The problem is while calling the method it taking some time to give the result so at that time i want to show processing icon and when the data comes then processing icon will be disable like ajax call; so any idea how to implement this.

Here is my code what i am doing :-

var result = getAlldata(Id, VoucherNo);
if(result.data!=null){ //Here to get result data it taking few times.
//doing some thing inside the page.
}

Regards:

Suryakant.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajesh10y ago
You need to call the show loading popup method, when u need. and just call the close loading method once,your function completed..
Showloadingpoup()
var result = getAlldata(Id, VoucherNo);
if(result.data!=null){
hideloadingpopup()
}
Add this HTML & CSS
.e-testjs-loading-progress {
background-image: url('images/loader_image.gif');
background-size: 71%;
background-repeat: no-repeat;
width: 83px;
height: 60px;
top: 50%;
position: absolute;
left: 50%;
z-index: 99999999999999999999999999999999999999;
}
.e-testjs-loading-progress-modal {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999999;
opacity: 0.3;
background: black;
}

in JS:
function Showloadingpoup(){
var progressElements = $(document.body).children(".testjs-loading");
progressElements.first().css("background", "");
progressElements.last().css({ "top": "45%", "left": "45%" });
progressElements.show();
}
function hideloadingpopup() {
var progressElements = $(document.body).children(".testjs-loading");
if (progressElements.length != 0) {
progressElements.first().css("background", "transparent");
progressElements.hide("slow");
}
},
Vinay Singh10y ago
Hi
Try the below links

http://smallenvelop.com/display-loading-icon-page-loads-completely/
http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
http://www.jquerybyexample.net/2012/06/show-loading-image-while-page-is.html