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>
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...' |
Event |
Description |
onStartLoading |
Fires when loading starts |
onFinishLoading |
Fires when loading starts |
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 |
$('#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");
}
});
$('#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');
Source code for this demo is under example/index2.html
![](example/images/demo1.gif)