JS Loader

JS Loader is a lightweight jQuery plugin written by Berka Ayowa that helps you create an animated spinner with a fullscreen loading mask

To use it you just have to include jQuery and a copy of JS Loader plugin in your head or footer:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../loader.js"></script>

Properies

Attribute	Description	Example	Default Value
gifUrl	Url for a spinner gif image.	"./images/loader.gif"	NULL
bgRgab	Background color in Rgab format.	'rgba(53, 53, 53, 0.8)'	'rgba(53, 53, 53, 0.8)'
color	Loading Text color.	'#eaeaea'	'White'
message	Loading Text	'Please waite'	'Loading...'

Events

Event	Description
onStartLoading	Fires when loading starts
onFinishLoading	Fires when loading starts

Methds

Methd	Description
show	To start showing loader
hide	To stop showing loader
setMessage	To set loading text
setHtmlMessage	To set loading text as html element

Basic Initialize

$('#loader').loader();

Initialize with options

$('#loader').loader({
    gifUrl: "./images/loader.gif",
    bgRgab:'rgba(53, 53, 53, 0.8)',
    color:'white'
});

Initialize with options and events

$('#loader').loader({
    gifUrl: "./images/loader.gif",
    bgRgab:'rgba(53, 53, 53, 0.8)',
    color:'white',
    onStartLoading: function() {
        console.log("started loading");
    },
    onFinishLoading: function() {
        console.log("Finished loading");
    }
});

Method calls

$('#loader').loader('setMessage', 'Please waite');
$('#loader').loader('setHtmlMessage', '<h1>Waiting..</h1>');

Show/Start loading (Method)

$('#loader').loader('show');

Hide/Stopt loading (Method)

$('#loader').loader('hide');

Demo

Source code for this demo is under example/index2.html