Did you find this useful?
Socialize it today.


Display an Image Spinner During an Ajax Request

Monday, January 28, 2013

Retrieving data from a web server using Ajax is a great way to load the data in 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, popup, 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 with 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.


Demo

The following snippets of code can be used to create a simple page which contains a link which when clicked, will display a loading "spinner" that will be displayed until the data called by the Ajax function is retreived 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 seperate style sheet. The JavaScript block can also be saved in a seperate .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.

If you would like to see this demo in action, click on this link.


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);
    }
}

If you would like to see this demo in action, click on this link.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Ajax for Dummies The Complete Reference Ajax Bulletproof Ajax