How to Show AJAX Loading Animation GIF Image

arp14 AJAX Tags: , , , , , , 4

Here you will learn how to show a AJAX loading animation GIF image and hide the image when loading is finished. We will modify CSS property of the loading element via JavaScript at right timing.

Show AJAX Loading Animation GIF Image

Files you need

index.html

Just a simple HTML file that has a external JavaScript file, a button with id “load” (you cal also use a anchor tag instead), a div with id “update” and a image with id “loading”. AJAX responseText content will fill the div with id “update”. We’ll show & hide the image with id “loading” at right timing. The image is hidden by default using “display: none;” inline CSS property in the img tag. You can use any GIF animated image here. You can quickly customize and generate beautiful AJAX loading gif images using online sites like ajaxload.info, preloaders.net, loadergenerator.com, etc.

<html>
    <head>
        <title>Show AJAX Loading Animation GIF Image - w3epic.com</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h1>Show AJAX Loading Animation GIF Image</h1>
        <h2>by Arpan Das - <a href="http://w3epic.com">W3Epic.com</a></h2>
        <button id="load">Load</button>
        <div id="update"></div>
        <img src="loading.gif" id="loading" style="display:none;" />
    </body>
</html>

script.js

In this very simple JavaScript file, we are getting the load button and on onclick event, we’re firing a standalone function. At the very beginning of the function, we’re getting the image and make it visible by setting it’s CSS property display = “block” (line 5). Then we’re doing a regular asynchronous AJAX call with GET method (you may use POST). In the call, right after updating the innerHTML of the div id “update” with responseText, we hide the loading GIF animation image by setting it’s CSS display property to none (line 16) and that’s it.

window.onload = function () {
	document.getElementById("load").onclick = function () {
		// show the loading image
		var loading = document.getElementById("loading");
		loading.style.display = "block";

		var xhr;
		if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); 		// all browsers except IE
		else xhr = new ActiveXObject("Microsoft.XMLHTTP"); 			// for IE
		xhr.open('GET', 'ajax.php', false);
		xhr.onreadystatechange = function () {
			if (xhr.readyState===4 && xhr.status===200) {
				var div = document.getElementById('update');
				div.innerHTML = xhr.responseText;
				// now hide the loading image
				loading.style.display = "none";
			}
		}
		xhr.send();
	}
}

ajax.php

This is the file where the AJAX call is made to. I used the sleep function to pause the script for few seconds – so that we can at least see the AJAX loading GIF image.

<?php
	sleep(1); // pause the script for 1 second
	echo "<p>Hello World from process.php via AJAX</p>";
?>

For me, its always fun to work with AJAX. I hope you enjoy this tutorial too.

If you got any problem, please write it here.

If you really like this article, please like, share and comment.

Thank you!

4 thoughts on “How to Show AJAX Loading Animation GIF Image

    1. Its funny. Why do I have to cheat you, all codes are already given.
      Yes there was a typo, w3eipc.com should be w3epic.com which is corrected now.
      Please retry, Thank you.

Leave a Reply

Note: Your email address will not be published. Required fields are marked *