How to show progress bar while loading page in div using jQuery?

Progress bar in jQuery with Ajax

Hello everyone, I am going to share the code sample for display the progress image after Ajax call for ADD/UPDATE data. The example detail as given below.

How to show progress bar while loading page in div using jQuery?

HTML Code-Sample

<div class="loadingDiv"></div>

JavaScript Code-Sample

//This is for loading the progress image..
$("div.loadingDiv").html('<div><img width="30px" src="' + lmageUrl + '" /></div>');
$("div.loadingDiv").show();

//This is for AJAX call..
executeAjaxRequestAsync(URLs, "POST", data, success, null, null);

//This is for seccess call..
var success = function (data) {
     if (data) {
        $("div.loadingDiv").hide();
     }
                                                                        
CSS Code-Sample

.loadingDiv{
    display:none;
    padding:2px 10px;
    position:fixed;
    background-color:rgba(0, 0, 0,0.4);
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:999;
}







Hope this help!

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^