Have you ever asked yourself how to show a spinner on a page while we have to wait for the server response? In most modern web-based applications, showing an indicator to tell our users when their request is finished is very valuable in the sense of usability as well as aesthetic appeal. You won’t have to wait for any longer. We are giving you a tutorial now.
Table of Contents
HTML Code
As being similar to any HTML document, a loading spinner is just a GIF image. You could create a loading icon by using CSS as instructed in HowTo – CSS Loader on w3school. For a simple illustration about displaying a loading icon, I am using an image. You won’t get any difficult to get a loading image without any charge from the internet. For example, https://loading.io/, https://icons8.com/preloaders/, etc. Below is the image being embedded into the HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show loading spinner</title>
<style type="text/css">
#loading {
display: none;
}
</style>
</head>
<body>
<h2>Show loading spinner</h2>
<button type="button" value="Search" id="btnSearch">Search</button>
<div id="container">
<img src="loading.gif" id="loading" title="working..." />
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</body>
</html>
The page has only one button to perform a request where it hits a remote service to search all curated models from BioModels. What we expect to see is a spinner for some seconds after clicking on that button. It will disappear when the results are shown.
jQuery Code
Triggering the display of the loading spinner
With ajaxStart and ajaxStop, we can turn on or off the loader. In this example, we do nothing in .ajaxStart event but hide the spinner inside .ajaxStop meaning that we have received all data returned from the server.
<script type="text/javascript">
const $loading = $('#loading');
$(document)
.ajaxStart(function () {
})
.ajaxStop(function () {
$loading.hide();
});
</script>
Implementing actions on the click event
Please have an insight into my code below. There are some different ways of sending an ajax call to the server. We could use either get or fetch, except for ajax explicitly.
<script type="text/javascript">
const $loading = $('#loading');
$(document)
.ajaxStart(function () {
})
.ajaxStop(function () {
$loading.hide();
});
$('#btnSearch').on("click", function () {
// Found the solution for overcoming 'Access-Control-Allow-Origin' issue
// See https://stackoverflow.com/a/43268098/865603
let url = "https://www.metaweather.com/api/location/44418/",
proxyUrl = 'https://cors-anywhere.herokuapp.com/';
url =
"https://wwwdev.ebi.ac.uk/biomodels/search?domain=biomodels&query=*%3A*+AND+curationstatus%3A%22Manually+curated%22&numResults=10&format=json";
$loading.show();
// Ref: https://zinoui.com/blog/cross-domain-ajax-request
// jQuery cross domain ajax
/*$.get(proxyUrl+url).done(function (data) {
console.log(data);
$('#container').text(JSON.stringify(data));
});*/
// using the Fetch API
/*fetch(proxyUrl + url).then(function (response) {
return response.json();
}).then(function (json) {
console.log(json);
});*/
// using ajax call
$.ajax({
type: "GET",
url: proxyUrl + url,
dataType: "json",
success: function (response) {
console.log(response);
$('#container').text(JSON.stringify(response));
},
error: function (jXHR) {
console.log(JSON.stringify(jXHR));
console.log("Error: " + jXHR.statusText);
}
});
});
</script>
That’s it!
The source code is published here.