how to caputre the file downloading event and stop the spining icon.

I am trying to capture the event of the file downloading such that the spinning loader can be stopped, however, I tried multiple ways, it's still not working yet. please see my code below:

<script type="text/javascript">
$(document).ready(function(){
    $(":submit").click(function() {   	
        $('#loader').show();
    
/*
* above block of code works, below block does not
*    
        var fileDownloadCheckTimer;
        fileDownloadCheckTimer = window.setInterval(function(){
        var cookieValue = getCookie('fileDownloadToken');
        if(cookieValue == "fileIsReady") {
        	$('#loader').hide();
        	finishDownload();}
        },1000);
        
    });
});



/**
 * Get a cookie
 * @param {String} cname, cookie name
 * @return {String} String, cookie value 
 */
function getCookie(cname) {
    var name = cname + "="; //Create the cookie name variable with cookie name concatenate with = sign
    var cArr = window.document.cookie.split(';'); //Create cookie array by split the cookie by ';'
     
    //Loop through the cookies and return the cooki value if it find the cookie name
    for(var i=0; i<cArr.length; i++) {
        var c = cArr[i].trim();
        //If the name is the cookie string at position 0, we found the cookie and return the cookie value
        if (c.indexOf(name) == 0) {
        	document.getElementById("demo").innerHTML = c.substring(name.length, c.length);;
            return c.substring(name.length, c.length);
        }
    }
     
    //If we get to this point, that means the cookie wasn't find in the look, we return an empty string.
    return "";
}
 
 /**
  * Delete a cookie
  * @param {String} cname, cookie name
  */
 function deleteCookie(cname) {
     var d = new Date(); //Create an date object
     d.setTime(d.getTime() - (1000*60*60*24)); //Set the time to the past. 1000 milliseonds = 1 second
     var expires = "expires=" + d.toGMTString(); //Compose the expirartion date
     window.document.cookie = cname+"="+"; "+expires;//Set the cookie with name and the expiration date
  
 }

function finishDownload(){
	
	window.clearInterval(fileDownloadCheckTimer);
	deleteCookie('fileDownloadToken');
    hideConfirm();		
}

function hideConfirm() {
    var x = document.getElementById("loader");
    if (x.style.display == "block") {
        x.style.display = "none";
    } 
}

</script>

Select allOpen in new window

the servlet send out the cookie "fileIsReady" for the browser to capture:

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		.........
		
		response.setContentType("application/octet");

		response.setHeader("Content-disposition", "attachment;filename=" + filename);

		Cookie cookie = new Cookie("fileDownloadToken", "fileIsReady");
		
		log.info("file download cookie is: " + cookie);
		response.addCookie(cookie);//for download signals
		
		ServletOutputStream sos = response.getOutputStream();
		workbook.write(sos);
		sos.flush();
		sos.close();
		workbook = null;
		log.debug("Finished to output excel stream.");

		
	}

Select allOpen in new window

My loader just keep running even though the file downloading has completed, which means the cookie---fileIsReady never been captured,  I carefully checked my source, nothing wrong, and the server does not report any error messages. can anybody help?