The Loading Progress GIF Image will be displayed in center of Page (View) and will be shown when the Page has started loading in Browser and it will be hidden as soon as the Page loading is completed using JavaScript.
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet” />
<div>
<div align=”center” id=”spinner” class=”spinner” style=”display:none;”>
<img id=”img-spinner” src=”/image/transparent-loading-gif-free-4.gif”/>
</div>
</div>
<script type=”text/javascript”>
var BaseUrl = “http://localhost:2562/”;
$(document).ready(function () {
loadData();
});
function loadData() {
//alert(“reached here”);
$(‘#spinner’).show();
$.getJSON(BaseUrl + “Base/GetbyID”)
.done(function (result) {
var html = ”;
$.each(result, function (key, item) {
html += ‘<tr>’;
html += ‘<td>’ + item.ItemName + ‘</td>’;
html += ‘<td><img src=”/image/images.png” alt=”” width=”64″ height=”40″/><span>’ + item.ItemCount + ‘</span></td>’;
html += ‘</tr>’;
});
$(‘#spinner’).hide();
$(‘.tbody’).html(html);
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + “, ” + error;
console.log(“Request Failed: ” + err);
});
}
</script>
OutPut -:
