Display loading progress image when Page Loads (not submit event)

Question

I need to display loading GIF image while page is loading or during postbacks using jQuery and JavaScript for long running tasks or processes which require significant amount of time to execute.

I tried this solution, I don't have error but the loading not show.

My code below.

I would greatly appreciate any help you can give me in working this problem.

.cs

protected void Page_Load(object sender, EventArgs e)
{
    string script = "$(document).ready(function ());";
    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    System.Threading.Thread.Sleep(5000);
    ExportToXLSFunction(); 
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="getData.aspx.cs" Inherits="getData"
    EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/jquery/js/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }

        ShowProgress();

    </script>
    <style type="text/css">
        .modal
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="loading" align="center">
        Loading. Please wait.<br />
        <br />
        <img src="/images/wait01.gif" alt="" />
    </div>
    </form>
</body>
</html>

score 0 · Answer 1 · answered Mar 26 '14 at 13:27

use ajaxStart() and ajaxStop()

/**on ajaxStart when process start it comes in this event**/
$( document ).ajaxStart(function() {
  $( ".loading" ).show();
});

/**on ajaxStop when process stop it comes in this event**/
$( document ).ajaxStop(function() {
  $( ".loading" ).hide();
});

score 0 · Answer 2 · edited May 23 '17 at 11:49

Have a look at the fiddler

http://jsfiddle.net/VpDUG/4952/

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

here is the nice explanation..you will love it.

How can I create a "Please Wait, Loading..." animation using jQuery?

I tried it, its working super.

Thanks to @Jonathan Sampson

score 0 · Answer 3 · edited Oct 09 '14 at 09:50

Some tweak for basic submit or ASP.NET post back.

function doModal(callback) {
 jQuery("body").addClass("loading");
 window.setTimeout(callback, 100);
}
jQuery(document).ready(function () {
 // Override __doPostBack()
 if (typeof(__doPostBack) != "undefined") {
  var dp = __doPostBack;
  __doPostBack = function () {
   var args = arguments;
   doModal(function () {
    dp.apply(dp, args);
   });
  };
 }
 jQuery('input[type="submit"]').click(function (ev) {
  doModal(function () { });
 });
});

The callback is not really needed, sorry :)

Display loading progress image when Page Loads (not submit event)

3 Answers3