/jquery-loading

A lightweight library to show a "loading" indicator while element is retrieving from server

Primary LanguageCSSApache License 2.0Apache-2.0

jquery-loading

Build Status

Show a "loading" indicator while element (could be text, image and so on) is loading from server

Docs and demo

  1. http://trungk18.github.io/jquery-loading/

  2. http://codepen.io/trungk18/pen/wWoLYR

Getting started

Install it, using Bower:

$ bower install jquery-loading-indicator

Include 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
});