Jquery loading image until download starts

I´m trying to have a loading image while waiting for the server to generate a PDF. When PDF is generated a browser dialog is prompted and that´s when the loading image should hide.

$.ajax({
  type: 'POST',
  url: $(this).attr('href'),
  success: function(response)
  {
   console.log( response );
   $(".report-generator").submit();
  },
 }
});

So this code is working.. kind of.. the loading image is shown but only for a short period of time.. the ajax call ends before the file is sent to the user.

This code shows the ajax loader when ever a ajax function is called

function initAjaxLoader() {
    $(document.body).ajaxStart(function() { 
        $('#ajax-loader').show();
    }).ajaxStop(function() {
        $('#ajax-loader').hide();
    });
}

So how do I keep the ajax call "active" until the download is prompted?

$.ajax({
  type: 'POST',
  url: $(this).attr('href'),
  success: function(response)
  {
   console.log( response );
    $('#result').load('test.pdf', function() {
        $('#ajax-loader').hide();
     });
  },
 }
});