jquery-loading
Show a "loading" indicator while element (could be text, image and so on) is loading from server
Docs and demo
Getting started
Install it, using Bower:
$ bower install jquery-loading-indicatorInclude it:
<!-- 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">Use it:
- 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 });Available options
$('#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 });
