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.
Files you need
- index.html
- script.js
- ajax.php
- loading.gif
- Download all together – 7.13 KB (password is w3eipc.com)
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!
there’s a typo in password 🙂
anyway thanks for this tutorial
Thank you, I’ll fix it ASAP.
you cheat me pass:w3epic.com is not working
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.