when I click on a link it has to show “some loading animation” till another page is loaded,how to do that?

Question

I have limited knowledge in web programming. I have a HTML page and a link on it. When I click on the link , python script will run in back end,and when the script finishes running I will go to another page. I want to show a loading animation gif image when the link is clicked. How to do that?

Answer 1

$.ajax({
            url: $_navigateURL,
            beforeSend: function (xhr) {
                PageLoadingProgressStart();
            }
        }).done(function (data) {
            $("#dvContentHolder").html(data);            
        }).fail(function (xhr) {
        })
        .always(function () {
            PageLoadingProgressEnd();
        });

The PageLoadingProgressStart () and PageLoadingProgressEnd () will handle the loading animation or progressbar or something else. like

function PageLoadingProgressStart() {
    $("#dvPageProgress div").width("0%");
    $("#dvPageProgress").show().find("div").width("40%");
}
function PageLoadingProgressEnd() {
    $("#dvPageProgress div").width("100%");
    setTimeout("$('#dvPageProgress').hide();", 500);
}