progress-animation while waiting for positive file-exists-check with jquery-ajax

Temple in Saitama (Japan), by Christoph Burmeister (own photo)

Temple in Saitama (Japan), by Christoph Burmeister (own photo)

Puh, long title, but actually very simple. Imagine you have a web-project that does some processing-intensive operations and you don’t want your users to watch the stupid browser-loading-icon. Instead you want to place a progress-loader to your site. In this case we wait for existence of a special file called „a.txt“ in the root-directory. So the loading-image will disappear if the file is created (or copied or called by the force).

The following projects contains four important files:

  • index.html : the canvas
  • default.css : the styling for the loader-area
  • ajax-check-for-file-script.js : the lib that contains our js-functions
  • ajax-loader.gif : the loader-image that will be pushed to loader-area while … loading 🙂

The body starts the showLoader()-function while its onloading. In the js-script we use the native js-function „setInterval()“ for an ajax’ed function that will be called every 1000msec. As long as the GET-operation to „./a.txt“ returns an HTTP-404 (not found) the showLoader()-function is called. If the GET-operation returns a HTTP-200 (success) – the file was found – the hideLoader()-function is called.


		<meta charset="UTF-8">
		<!-- css-imports -->
		<link rel="stylesheet" href="./styles/default.css" type="text/css" />
		<!-- javascript-imports -->
		<script type="text/javascript" src="./scripts/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="./scripts/ajax-check-for-file-script.js" /></script>

	<body onload="showLoader()">


/* center it */
#loaderDiv {
	top: 50%;
	left: 50%;
	margin-left: -100px; /* 0.5 x width */
	margin-top: -10px; /* 0.5 x height */


var ajaxRequestIntervalMs = 1000;
var ajaxRequestUrl = './a.txt';
var loaderImageUrl = './img/ajax-loader.gif';
var loaderDivName = 'loaderDiv';

var isLoading=new Boolean(); 

//JavaScript's built-in setInterval() function
			url: ajaxRequestUrl,
			type: "GET",
			cache: false,                                  
			statusCode: {
				// HTTP-Code "Page not found"
				404: function() {
					if (isLoading===false){
				// HTTP-Code "Success"
				200: function() {
					if (isLoading===true){

// ------------ show- and hide-functions for the overlay -----------------
function showLoader(){
	$("body").append("<div id='" + loaderDivName + "'><img src='"+loaderImageUrl+"' /></div>");
function hideLoader(){
	$("#" + loaderDivName).remove();


taken from