How to display and remove a loading .gif when downloading a file?

Question

I have a button that, when clicked on, needs to download a file by submitting a form using POST. [Edit to clarify: The file being downloaded is dynamically

Answer 1

I've done this with 2 librairies Under MIT licence : BinaryTransport and FileSaver. In this exemple, i'm downloading an Excel file generated server side.

HTML (in head tag):

Javascript :

function ExportToExcel(urlExcel, fileName){
      $("body").css("cursor", "progress");
      $.ajax({
          url: urlExcel,
          type: "GET",
          dataType: 'binary',
          headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'},
          processData: false,
          success: function(blob){
                $("body").css("cursor", "default");
                saveAs(blob, fileName);
          },
            error : function(result, status, error){
                $("body").css("cursor", "default");
          } 
        });  
}

For a custom loading animation, just call it where I change cursor type at these lines :

$("body").css("cursor", "progress");
$("body").css("cursor", "default");