Contact Me

Nirav Prabtani

Mobile : +91 738 308 2188

Email : niravjprabtani@gmail.com

Nirav Prabtani

Wednesday 16 July 2014

How to show loading is in progress with the image using ajax


How to show loading is in progress with the image using ajax


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
 
  .divBackMain
        {
            z-index: 99;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background-color: black;
            opacity: 0.4;
        }
        .divLoader
        {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 100;
            margin-left: -110px;
            margin-top: -110px;
            width: 220px;
            background-image: url('http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif');
        }
        #DivLoaderContainer
        {
            display:none;
            }
 function UploadData() {
 
            $("#DivLoaderContainer").fadeIn(); //set fadeIn whenever ypu want to show loader
            $.ajax({
                type: "POST",
                url: "PageName.aspx/MethodName",
                contentType: "application/json;charset=utf-8",
                data: {}, //Parameters
                dataType: "json",
                success: function (data) {
 
                    $("#DivLoaderContainer").fadeOut(); //set logout after finish all process 

 
                },
                error: function (result) {
 

 
                }
            });
 
 <div id="DivLoaderContainer">
            <div class="divBackMain">
            </div>
            <div class="divLoader">
                <img src="http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif" />
            </div>
        </div>

I have set visible using $("#DivLoaderContainer").fadeIn(); before ajax call
and after completion of ajax call it should be disappear using $("#DivLoaderContainer").fadeOut();
you can set fadeIn and fadeOut as per your need.. :)

No comments :

Post a Comment