ajax preloader
HTML
<button id="save">Load User</button>
<div id="loading"></div>
<div id="loading2"></div>
<div id="loading3"></div>
<div id="loading4"></div>
<div id="loading5"></div>
JavaScript
$(document).ready(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading, #loading2,#loading3,#loading4,#loading5').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 500);
}
});
});