trungvose / jquery-loading

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

jquery-loading

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

jquery-loading's Issues

How to Hide it ?

I don't know how to hide indicator.

how to make the circle thicker

Hello,

Is there a way to make the border of the circle thicker / larger ?

Thanks.