I also want to contribute to this answer. I was looking for something similar in jQuery and this what I eventually ended up using.
I got my loading spinner from http://ajaxload.info/. My solution is based on this simple answer at http://christierney.com/2011/03/23/global-ajax-loading-spinners/.
Basically your HTML markup and CSS would look like this:
<style>
#ajaxSpinnerImage {
display: none;
}
</style>
<div id="ajaxSpinnerContainer">
<img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>
And then you code for jQuery would look something like this:
<script>
$(document).ready(function () {
$(document)
.ajaxStart(function () {
$("#ajaxSpinnerImage").show();
})
.ajaxStop(function () {
$("#ajaxSpinnerImage").hide();
});
var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
$.getJSON(owmAPI)
.done(function (data) {
alert(data.coord.lon);
})
.fail(function () {
alert('error');
});
});
</script>
It is as simple as that :)