python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions