Retrieving data from a web server using Ajax is a great way to load the data on the web page without having to require the page to be reloaded. However, getting that data may take some time and you may want to provide the user with a visual representation that something is “happening”.
The common approach is to either provide the user with some type of alert, pop-up, or just display a spinning icon. In this tutorial, we will cover how to create a web page that contains a link that will initiate this type of process. We will not go into the specifics related to Ajax, just provide you with some sample code that you can use to integrate into your web projects.
In the example code below, you will notice some basic HTML and CSS markup. In the JavaScript section, there are three functions provided. Two of the functions simply handle the showing and hiding of the modal type pop-up that
will be displayed once the link is clicked.
We consider it to be modal because the rest of the page is not accessible until the pop-up is closed. We do this by introducing an additional <div> element on the page that takes 100% of the display and sits between this modal pop-up and the content div.
When this modal pop-up is displayed, we also display the fade div and apply some styles such as opacity so that the user can slightly see the contents in the background. In the loadAjax() function, all we are doing is showing and hiding this modal pop-up during the process of starting and ending our Ajax process.
Example
The following snippets of code can be used to create a simple page that contains a link. When clicked, will display a loading “spinner” that will be displayed until the data called by the Ajax function is retrieved from the web server.
The CSS can be located within the <style> element in the head section of the HTML file, or better yet, in a separate style sheet. The JavaScript block can also be saved in a separate .js file, or should be placed within a set of <script> elements either in the head section or at the bottom of the page, just before the closing </body> tag.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
</head>
<body>
<div id="content">
<h2>Ajax Demo with "Loading" Spinner</h2>
<p>In this demo, clicking the link below will execute a JavaScript function that gets data using Ajax.
While Ajax is waiting on the data from the web server, a "loading" gif is displayed so that the visitor
waits for the data to be displayed. In addition to image being displayed, the background is dimmed to keep
the user's focus on the image. An additional div element is sitting between the content and the loader so
that the visitor is not able to interact with the page while the load is occurring.</p>
<a href="/articles/1506-how-to-display-image-spinner-ajax-request">Click here to return to the
tutorial.</a><br /><br />
<h2>Demo</h2>
<a href="javascript: void(0);loadAjax();">Click to load get data via Ajax!</a><br /><br />
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="images/loading.gif" />
</div>
</div>
</body>
</html>CSS
body, html {
margin:0;
padding;
height:100%
}
a {
font-size:1.25em;
}
#content {
padding:25px;
}
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
#results {
font-size:1.25em;
color:red
}JavaScript
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax() {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "load-ajax-data.php", true);
xhr.send(null);
}
}
