Show a "loading" indicator while element (could be text, image and so on) is loading from server
Install it, using Bower:
$ bower install jquery-loading-indicator
<!-- jQuery -->
<script src="js/vendor/jquery-3.1.0.min/index.js"></script>
<script src="js/jquery-loading.js"></script>
<!-- Include the CSS file to use the plugin default themes and loaders -->
<link href="css/jquery-loading.css" rel="stylesheet">
- Init loading
$('#loading').loading({ circles: 3 });
- Hide loading indicator from its container.
$('#loading').loading({ hide: true});
- Destroy loading indicator from its container from the DOM.
$('#loading').loading({ destroy: true });
$('#loading').loading({
overlay: false, // add an overlay background
width: null, // set fixed width to loading indicator, otherwise calculated relative to element
indicatorHtml: "<div class='js-loading-indicator' style='display: none;'></div>",
overlayHtml: "<div class='js-loading-overlay' style='display: none;'></div>",
base: 0.9, // indicator's width/height relative to element
circles: 3, // number of indicator circles: maximum is 3
top: null, //indicator position relative to the top of its container
left: null, //indicator position relative to the left of its container
hide: false, // hide the indicator of the current element
destroy: false //remove the indicator from the DOM
});