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();
$('#loader').loader({
gifUrl: "./images/loader.gif",
bgRgab:'rgba(53, 53, 53, 0.8)',
color:'white'
});
$('#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>');
$('#loader').loader('show');
$('#loader').loader('hide');