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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book