Usually there is a delay whenever a web application interacts with the server. For an AJAX request, uploading a file or retrieving information will tend to have a silent time while the request is being process.
While this is happening, it is ideal that you should provide some user feedback to indicate their action is being processed. Often times you see an animated GIF rotating patterns while the process is not yet done. In today's web there are a lot of sites which will able to create loaders gif for you such as ajaxload.info but there are plenty more resources on the web.
In today's tutorial, I am going to show you how we can create a
jQuery - AJAX loading effect while waiting for the Ajax request to interact with the server.
Let's get started.
Resources you need to complete this tutorial:
• jQuery Library
• GIF Preloader Image
• Basic Knowledge about jQuery and AJAX
• Time and Patience
What we are going to build:
CLICK HERE FOR DEMO
The HTML
For our markup, we will simply have a button with an id of load and a div with an id of content. We will force the div with an id of content to start an GIF preloader image and then replace it with a data return from a server using AJAX request. Check out the code below.
[html]
<button id="load">Show Content</button></pre>
<div id="content"></div>
<pre>[/html]
The CSS
For our style sheet, we will simply style three elements: the button, the preloader image and the content area with the border where we will be setting up the retrieve data using AJAX request.
[css]
button#load{
padding: 0 3em;
outline: none;
border: none;
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 1em;
line-height: 4;
overflow: hidden;
border-radius: 5px;
background: rgba(0,0,0,0.2);
text-align: center;
cursor: pointer;
margin: 20px auto;
display: block;
}
[/css]
[css]
#loader-img{
margin: 0 auto;
display: block;
}
#content{
width: 40%;
margin: 0 auto;
padding: 3em;
text-align: center;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 600;
}
.border{border: 3px solid #fff; border-radius: 5px;}
[/css]
The jQuery
For the jQuery part, we will create a click function on the button with the load id. Then it will add an html content of preloader to inform user that the process is still in progress.
You can use any GIF or SVG image here. You might wanna try ajaxload.info or preloaders.net to create one.
[javascript]
('#load').click(function () {
// Adding loading GIF
$('#content').html('<img id="loader-img" alt="" src="http://adrian-design.com/images/loading.gif" width="100" height="100" align="center" />');
//AJAX REQUEST HERE
});
[/javascript]
The AJAX
Now here comes the tricky part where we will interact with AJAX request to the server. Using the $.ajax we will interact with the data of Github api for users with the login username of sam which is a JSON file.
A set of key/value pairs that configure the Ajax request. All settings are optional. For this part we will use type, dataType and the URL where we willbe retrieving information.
Upon sucess, we will place the retrieved data to the div after the setTimeOut function. Check out the codes below.
[javascript light="true"]
$('#load').click(function ()
// Adding loading GIF
$('#content').html('<img id="loader-img" alt="" src="http://adrian-design.com/images/loading.gif" width="100" height="100" align="center" />');
// Ajax Request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/sam",
success: function (loader) {
// This replace the retrieved data to the div after the setTimeOut function
setTimeout(function () {
$('#content').html('Hi I am ' + loader.login + '!
' + 'From ' +loader.location).addClass('border');
}, 3000);
}
});
});
[/javascript]
Notice that we loader to determine which data to select on the Github API. For this tutorial I selected login username and the location of the user. Finally I added a class border to wrap the content with a border.
Now if you are going to check this on the browser you'll see a nice loading effect while the AJAX request is being process.
Conclusion
Congratulations! You just learned how you can add a preloader as well how to interact with AJAX request in a server.
Although there might be some other way to do this, they usually work on JavaScript and AJAX request. It’s a great effect which can be customized easily and works on different browsers.
Hope you learned something on this tutorial and see you again next time!
