How to Show Ajax Loading Gif Animation While the Page Is Loading

Display loading gif when AJAX call is in progress

Create an element for loadingImage. On page load keep the image hidden by default.
Show the gif image on button click and hide it again inside success() and error() both.

<script>
    $(document).ready(function(){
        $("#formT button").click(function (ev) {
            ev.preventDefault()
            $("#loadingImage").show(); // <---
            if ($(this).attr("value") == "btn_tool") {
                $.ajax({
                    type: 'post',
                    url: '<?php echo APP_NAME;?>functions/app_form.php',
                    data: $('form').serialize(),
                    success:function(data){
                        $("#loadingImage").hide(); // <---
                        $("#statusT").html(data);
                    },
                    error:function (){
                        $("#loadingImage").hide();  // <---
                        
                    }
                });
            }
        });
    });
</script>

How to show ajax loading gif animation while the page is loading?

There are many approaches to do this.
A simple way to do:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

JS:

$(function() {
    $(".changepass").click(function() {
        $("#dvloader").show();
        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
        return false;
    });
});

Edited display:block to show() after suggestion from James Wiseman :)

How to show loading gif while page hasn't fully loaded

The reason why the gif is not showing until the generate.php is almost loaded is because when you click the submit button, the form is submitted to generate.php and you are no long on the generate_schedule.php. But the content is gonna take a long time to load, so the browser prefer to display the generate_schedule.php content at the moment, instead of displaying a blank page.

General approach is to put the loader on generate_schedule.php page instead on generate.php. Display the loader first when click the button, then submit the form, then the page will keep loading content while diplay the loader gif.

So here is something what I usually do:
1. add a hidden element on generate_schedule.php like:

<div id="loading"><img src="loading.gif" /></div>

with the css like (assuming the image is 60px width and 40px height):

#loading{
    position: fixed, 
    top: 0; left: 0; 
    width: 100%; height:100%; 
    background-color: rgba(255, 255, 255, 0.6); 
    z-index: 1000;
    display:none;
}
#loading img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -30px;
}

Basically move the loader from generate.php to generate_schedule.php.
then on the generate_schedule.php add javascript as:

$('#submitBtn').on('click', function(e){
    e.preventDefault();//prevent the form submit
    e.stopPropagation();// stop propagation
    $('#loading').show();
    $('#form').submit();
});

Show loading image while $.ajax is performed

You can, of course, show it before making the request, and hide it after it completes:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events, that way it shows up for all ajax events:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

I want to show loading gif while ajax processing

I wouldn't use Success and Error anymore as there's nicer ways to do this now and you won't get stuck in CallbackHell some day. I would try this.

Another benefit from this is you don't have to use async: false. It takes a while getting used to asynchronous programming but its worth it.

If you always make your programm to wait for a call to finish you will end up with a very slow application.

var ajCall = $.ajax({yourAjax});

[Stuff to do while loading]

ajCall.done(function(){stuff to do when ajaxCall was sucessfully finished});
ajCall.fail(function(){stuff to do when your ajaxCall fails for some reason});

How to load gif image while ajax content is loading and javascript

jQuery's ajax has a method called beforeSend, make use of it!

Example:

$.ajax({
    url: someurl.php,
    data: data,
    beforeSend: function() { $('#image_id').show(); },
    success: function() {
        $('#image_id').hide();
        // ...
    }
});

display loading gif in specific a div while ajax loading

This is would solve your problem. Place loading gif inside div hidden and when ajax starts show gif and when ajax complete hide gif again.

<div class="row">
   <div class="col-lg-12 div-Summary-Report">
       <img src="loading.gif" class="loading">
   //some content
   </div>
 </div>

 <style type="text/css"> 
    .loading{display:none;}
 </style>

Display loading gif while page is loading

You can go through jQuery for this. jQuery provides you lots of animation event or functions.

Click here jQuery Image Loader for see some nice example that you can use in your code.

Display AJAX Loader on page load

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:

<div id="loading">
    <p><img src="loading.gif" /> Please Wait</p>
</div>

You'll want this hidden by default, so you'd need to add this CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
       background-image:url("transparentbg.png"); }

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

function showLoading() {
    $("#loading").show();
}

function hideLoading() {
    $("#loading").hide();
}

Now you can use this when you need to do something like querying an external page for data:

showLoading();
$.post("data.php", {var:"foo"}, function(results){
    $("content").append(results);
    hideLoading();
});